• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Mobil UX design
 

Mobil UX design

on

  • 1,234 views

A MOME ID User interface design tanfolyamon elhangzott előadás mobil környezetről, felhasználókról és mobil felületek tervezéséről.

A MOME ID User interface design tanfolyamon elhangzott előadás mobil környezetről, felhasználókról és mobil felületek tervezéséről.

Statistics

Views

Total Views
1,234
Views on SlideShare
1,203
Embed Views
31

Actions

Likes
10
Downloads
0
Comments
0

3 Embeds 31

http://www.linkedin.com 15
https://www.linkedin.com 9
https://twitter.com 7

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Mobil UX design Mobil UX design Presentation Transcript

    • Mobil UX design Kollin Zoltán ! MOME ID 2013
    • USER INTERFACE DESIGNER TANFOLYAM http://momeid.mome.hu/ 2013. november 5.
    • HELLO Kollin Zoltán! ux designer @ mito
    • A mobilról lesz ma szó. felhasználókról natív appokról és mobil webről használhatóságról felülettervezésről követendő példákról
    • A mobil felhasználó
    • Tartalomfogyasztás mobilon
    • Nem csak méretben különbözik
    • Hanem például kontextusában is Fél szemmel Fél kézzel Menet közben Egy ujjal
    • Ugyanakkor: “In Google’s annual survey of mobile users, they found that 60% of smartphone use takes place in the home.” ! http://uxmag.com/articles/six-mobile-myths
    • Mi a felhasználó célja?
    • Ugyanaz, mint amikor a számítógépe előtt ül.
    • Információkeresés! pl. Google Maps Státuszkövetés! pl. Facebook Munka / feladat! pl. E-mail Unaloműzés! pl. Angry Birds
    • A lényeg érdekli
    • A kevesebb sokszor több
    • ‣ GPS ‣ Kamera ‣ Giroszkóp ‣ Accelerometer A mobil nem korlátoz. Sőt. ‣ Iránytű ‣ Multi-touch ‣ NFC ‣ Ujjlenyomat-olvasó ‣ Hangvezérlés ‣ Light sensor ‣ Proximity sensor
    • Natív app vagy mobil web?
    • Natív app Használhatod a telefon teljes funkcionalitását! Push notifikáció, in-app purchase! Jobb lesz a teljesítmény! Állandó login! De! Tovább tart és drágább a fejlesztés! Minden platformra külön el kell készíteni! Bonyolultabb az update
    • Mobil web Olcsóbb, gyorsabb, rugalmasabb! Egy helyen történik a fejlesztés! Keresőoptimalizálhatod! De
 Nem natív :)
    • ján A tt lo lva o ny má s Luke Wroblewski! Mobile First
    • Mobil ergonómia
    • Direkt manipuláció és gesztusok
    • Intuitív, de máshogy használjuk
    • Nehezebb “célozni”! Nagyobb tappintható terület 
 és white space kell Nincs ! egérkurzor
    • Látszódjon, hogy “kattintható”! Button Button Nincs ! hover Tooltipek és kinyíló menük újragondolása
    • Kerüld a kétirányú scrollt! Legyen egyértelmű, ha folytatódik Scroll helyett swipe
    • Vizuális visszajelzések! Animációk! Gombok “pressed” állapota Nincs fizikai feedback
    • Arányaiban nagyobb szövegméret! Könnyen olvasható tipográfia! Tömör, tagolt szövegek Kisebb felület, kisebb pixelek
    • Gépelni is teljesen más rajta
    • Az a bizonyos hüvelykujj
    • Az a bizonyos hüvelykujj A könnyen elérhető területek
    • Nem csak egyféleképpen tarthatod
    • A használatban is vannak trendek Az a bizonyos hüvelykujj
    • A használatban is vannak trendek Az a bizonyos hüvelykujj
    • ló a Az a bizonyos hüvelykujj as lv iv n ján A to lot Android iOS Windows Phone Design guideline-ok
    • Mobile UI tervezés
    • Lineáris, egy oszlopos képernyőstruktúra
    • Legfontosabb a tartalom
    • A navigáció csak második
    • Információs architektúra tervezés
    • Navigáció típusok Tabok Egyértelmű legnépszerűbb tartalom Fix hierarchia Több szint mély struktúra
    • Navigáció típusok Dashboard Sekély információs architektúra Egyenlő prioritás a tartalmak között A nyitóoldal “feláldozása”
    • Navigáció típusok “Hamburger” Rejtett menü Minden felületről elérhető Rugalmasan bővíthető
    • Tabok Dashboard “Hamburger”
    • Popover Gesztus ???
    • Gesztusok, mint navigáció
    • Mobil form design tippek
    • Dobj ki mindent, ami nem létszükséglet
    • Egyszerűsített regisztráció
    • Mezőcimkék felül vagy a mezőben
    • Használj megfelelő mezőtípusokat
    • Használd ki a mobil adottságait
    • Nem csak checkboxok vannak
    • Default értékek
    • Tippek és segítség
    • iv n ján A to lot as lv ló a http://pttrns.com/
    • Részletek
    • Animáció
    • Feedback
    • Feedback
    • “Félrekattintottál vagy komoly?”
    • Első használat
    • Tour
    • Edukáció menet közben
    • Amikor nincs még tartalom
    • Splash screen
    • Gesztus, másként
    • Szövegezés
    • Amikor mindenre gondolnak
    • iv n ján A to lot as lv ló a http://littlebigdetails.com/
    • Drótváz tervezés
    • Drótváz (wireframe)
    • Grafikai design
    • Wireframe Grafikai terv Képernyőszerkezet A pontos megjelenés:! Navigáció Színek Tartalomstruktúra Formák A megjelenített információk Grafikai elemek Interaktív funkciók működése Tipográfia Az ezek közti arányok, kapcsolatok, hangsúlyok Vizuális stílus
    • Wireframe Grafikai terv
    • Wireframe Grafikai terv
    • Wireframe Grafikai terv
    • Low fidelity
    • High fidelity
    • Flow-k és felületek
    • Eszközök
    • Axure
    • Miért készíts először wireframe-et? Hogy a működésre, ne a megjelenésre koncentrálj. Hogy a grafikailag jelentéktelennek tűnő kérdéseket is alaposan átgondold. Hogy gyorsabban tudd validálni. Hogy könnyebben tudj módosítani.
    • Drótvázból prototípus
    • Mielőtt rajzolni kezdesz, ! ismerd meg… a funkcionalitást a tartalmakat a technikai környezetet a felhasználó igényeit a struktúrát
    • Köszönöm a figyelmet!