Tuesday, October 11, 2011

Mobile Interactions

Kadri-Ann Valgeväli

Mobile UI Guidelines

  • Reduce functionality - app peab tegema ainult ühte asja või väga vähe asju, mitte paljusid asju.
    • Halb näide - SEB pank
    • Marketingi võidujooks põhjustabki läbimõtlemata rakendusi
  • Finger hot-spot - et ühe käega oleks võimalik app-i kasutada
    • Tabletit hoitakse landscapes kahe käega - enamasti
  • Finger-size buttons - Apple puhul vähemalt 44x44px
    • 3D look and feel
  • Illustrations - nõuab rohkem läbimõtlemist, et inimesed saaks aru, kuidas töötab
    • naviSail - muutsid nupu 3D look and feel-ks ja inimesed said aru
  • Use standard components
    • igal platvormil on erinevad komponendid. Näide - iPhone ja Android EMT Parking app
  • Light conditions - päike särab või sõidu ajal telefon käes vibreerib
  • User input (klaviatuur) - kui saab, siis klaviatuuri vältida
    • Alternatiiv - voice või image
  • Keyboard location - kõik komponendid võimalikult üles, et keyboard ära ei kataks
  • Gestures - on standardid, kuidas inimesed appi kasutavad (tap, drag jne)
  • Animations - info button iPhone-l pöörab teise külje, Androidil tuleb slaidina alt üles
Apps Usage
  • 1. kohal mängud, 2. ilm
    • Flash lamp apps
  • Kasutajad laevad app-i alla ning seejärel tegevus langeb
  • Fancy desing - kui inimesed näevad midagi ilusat, siis peavad nad seda automaatselt kasutajasõbralikuks. Disain on esimene asi, mida sa näed. Disainerit maksab kasutada!
  • Log in - ära kasuta "log in"-i, vähemalt mitte kohe alguses
  • Notifications - pakkuda tasuta mingeid asju vahepeal, et kasutaja ei lõpetaks appi kasutamist
  • Collect data - Pane kasvõi Google Analytics külge, kui saab
    • "3D view" vs "Fitting room" button - 3D view võitis, teooria, et smartphone kasutajad on rohkem tehnikateadlikud
Disaini protsess
  • Analüütikud ja klient annavad inputi
  • Võtame kõik nõudmised ja paneme enda ekspertarvamuse järgi paika
  • Siis läheme lõppkasutaja juurde testima
  • www.balsamiq.com - mockupide tegemiseks, web demo piiramatult kasutamiseks
  • Photoshop - graafiliste sketchide jaoks, disainiflashi jaoks, pigem juhtide jaoks, kes ei taha teada, kuidas mingid asjad töötavad, vaid kuidas nad välja näevad

Mockups
  • A pixel-perfect representation of the applications user interface
  • Väga põhjalikud, täpsed ja valmis kujundused
  • Tööriistad mockupide tegemiseks: 
    • Adobe Photoshop (iPhone 4 GUI PSD) - Parim.
      • Font "Helvetica" - iPhone põhifont - ilus Arial - PC-l puudub
    • Omnigraffle 
      • http://graffletopia.com/categories/iphone
    • MockApp
  • Defining the interactions - State Transition Diagram - näide, kuidas süsteem toimib/käitub


----------------------------------------------------------------------

Tagasiside Eesti-Hollandi sõnaraamatu app-ile
  • Kasutaja tahab prügikasti visatud asja taastada
  • Mida see internetist leitud vaste näitab? Kas ainult sõna või hääldus või lauses kasutatud
  • Ühele sõnale võib olla mitu vastet
  • Kas ei ole back-nuppu?
  • Sketchil võiks paremini aru saada, kus kuva lõpeb.
  • Otsing ja kustuta ei tohiks kõrvuti olla

Tagasiside Ilmateate app-ile
  • EMHI-st kogutud info, mis uueneb iga tunni tagant
  • Weather maps land and sea
  • Võiks olla hoiatuste app
  • Sitemap - vahend web applicationite tegemiseks
  • Kasutasid mockupide jaoks: http://www.genuitec.com/mobile/ 
  • Tegelikult võiks olla ainult land või map

  • App on konkreetse klubi jaoks - squash
  • Otsid partnerit, kellega mängida, siis vaatad graafikust ja valid kellega mängida või ütled, et otsid partnerit ja helistad talle
  • Kuidas tehakse kinnitus platsi broneerimiseks pärast helistamist?
  • Aega võiks saada saata kohe oma kalendrisse

Naiste jalgpallikoondiste app - tegemisel

  • Orienteerumis-seiklusmäng
  • Sarnane Locamotionile

No comments:

Post a Comment