Category Archives: UX

Apuohjelmia iOS-designereille

Xcode on asennettu, mitä nyt? Tässä kokoelma apuohjelmia ja muita resursseja, jotka helpottavat iOS-sovellusten kehitystä ja erityisesti käyttöliittymäsuunnittelua.

Templaattikokoelmat

Omnigraffle on suosikkityökaluni rautalankojen laatimiseen. Da5id:n kokoelma on paras tietämäni iOS-templaatti OmniGrafflelle.

Tuotantokelpoista jälkeä tarvittaessa Teehan & Lax:n Photoshop-kokoelma on mainio. Kannattaa malttaa nähdä sen verran vaivaa, että tekee 1x-grafiikat sille tarkoitetun tyylipohjan avulla, niin kuvat pysyvät mahdollisimman tarkkoina.

Liveview (ilmainen)

Liveview näyttää iPhone tai iPadin ruudulla valitun alueen tietokoneen työpöydältä. Tämä on hyödyllistä, jos haluaa tarkistaa, miltä grafiikat näyttävät retina-näytöllä ja että tekstit ovat varmasti luettavissa.

Sovelluksen avulla voi toteuttaa myös yksinkertaisen wizard of oz -demon operoimalla näkymiä tietokoneelta ja antamalla puhelimen käyttäjän käteen.

iExplorer (ilmainen)

 iOS-laitteissa ei ole tiedostojenhallintaa. Joskus on kuitenkin hyödyllistä nähdä, mitä tiedostoja minnekin kertyy. iExplorer on Mac-ohjelma, jolla pääsee selaamaan puhelimensa tiedostorakennetta.

xScope (29,99 $)

xScope tarjoaa vastaavan toiminnallisuuden kuin Liveview. Lisäksi sen avulla voi mittailla eri elementtien kokoja tietokoneen näytöltä ja lisätä apuviivoja. Tuleepa mukana virtuaalinen viivoitinkin. Apuviivoista on apua esim. Xcodessa, jonka omat viivat toimivat vähän kankeasti.

Ostin sovelluksen aikoinaan alennusmyynistä. Täysi hinta on hieman tyyris. Jos tarvitset vain viivoitinta, katso Free Ruler. Se on ilmainen, mutta toimii vähän bugisesti uusilla käyttöjärjestelmillä.

Mittaamisesta puheen ollen: itse käytän jatkuvasti kuvakaappausnäppäinkomentoa eri asioiden koon mittaamiseen. Painamalla komento + shift + 4 voi ottaa kuvakaappauksen halutusta näytön alueesta. Ominaisuutta voi käyttää myös elementtien kokojen selvittämiseen – ja kun painaa esciä ennen kuin päästää hiireen irti, säästää maailman turhalta kuvaruutukaappaukselta.

Hex color picker (ilmainen)

 Kuvakaapparin lisäksi Mac OS X:ssä on mainio pipettityökalu värien poimimiseen. Sen käyttöliittymä on peruja Next-ajoilta, ja pelkään pahoin, että moni ei edes tiedä sen olemassaolosta. Suurennuslasia klikkaamalla voi valita haluamansa värin kuin Photoshopin pipetillä. Ja mikä parasta, tämä toimii myös ohjelmien välillä.

Kätevää on myös siirtää värejä sovellusten välillä raahaamalla värin valitsimen alalaitaan.

Mac OS X:n värivalitsinta voi tehostaa asentamalla Hex color picker -laajennuksen. Sen avulla saa näkyviin suoraan värin heksa-arvon, mikä on hyödyksi myös web-suunnittelussa.

Skitch (ilmainen)

 Vakavamielisempään kuvakaappausten ottamiseen kannattaa hankkia Skitch. Se on yksi ohjelmista, joita ei voi suositella kylliksi. Kuvakaappausten ottamisen lisäksi Skitchillä voi tehdä niihin kätevästi merkintöjä: tekstiä, nuolia, vapaita tuherruksia. Paras puoli on kuvien jakaminen. Jos kuvan raahaa pois Skitchistä, siitä luodaan automaattisesti tiedosto kovalevylle ilman että kuvaa joutuisi itse erikseen tallentamaan.

Jos haluaa vaikkapa lisätä Jiraan kuvakaappauksen löytämästään bugista, ei tarvitse ensin tallentaa tiedostoa ennen kuvan lataamista selaimeen ja sitten etsiä uudelleen avaa-dialogissa, vaan riittää, että raahaa sen selaimeen suoraan Skitchistä. Kuvien lataaminen kaikkien nähtäville skitch.comiin käy sekin yhdellä klikkauksella.

Screenshot Journal (1,59 €)

Tietokoneen lisäksi kuvakaappauksia tulee helposti ottaneeksi valtavat määrät puhelimelta. Valitettavasti Apple on katsonut viisaaksi näyttää kuvakaappaukset samassa läjässä puhelimella otettujen valokuvien kanssa. Apuun tulee Screenshot Journal, joka poimii kuvakaappaukset erilleen kuvavirrasta ja tarjoaa keinoja kuvien hallintaan.

Jos tykkää nahkaefekteistä ja tikkauksista, sovellukseen kannattaa tutustua jo niiden vuoksi. Ovat keskimääräistä hienommat.

Kuvansiirtäjä

Mac OS X:n mukana tuleva kuvansiirtäjä ei ole tainnut saada ainuttakaan päivitystä sitten ensimmäisen Mac OS X -version, ja käyttöliittymä on muutamilta osin rasittava. Jos puhelimelta haluaa noutaa kuvakaappauksia, se on kuitenkin kevyempi vaihtoehto kuin iPhoto. Jos tiedät Kuvansiirtäjää paremman vaihtoehdon, kerro toki kommenteissa!

iOS-Simulator Cropper (ilmainen)

Laitteella kuvakaappauksien ottaminen on kaikesta huolimatta vähän jähmeää. Käyttöohjeita, promokuvia yms. varten on usein kätevämpää  ottaa kuvakaappaukset suoraan Xcoden Simulator-ohjelmasta. iOS-Simulator Cropper ottaa kuvakaappauksen pelkästään simulaattorissa pyörivästä ohjelmasta, nimeää sen halutulla tavalla ja lisää haluttaessa kuvan ympärille iPhone-kuoret kiiltoineen kaikkineen.

Myös status barin poistaminen kuvan ylälaidasta onnistuu helposti, jos vaikka haluaa lisätä kuvakaappaukset App Storeen Applen ohjeiden mukaan ilman palkkia.

iPhone Configuration Utility (ilmainen)

Sovellusten ja provisiointiprofiilien asentaminen onnistuu periaatteessa iTunesilla, mutta sillä on paha tapa synkronoida valtavia datamassoja joka välissä heti kun se löytää koneeseen kytketyn puhelimen. Kätevämpi työkalu on Applen tarjoama iPhone Configuration Utilyty. Sen avulla voi mm. asentaa .IPA-muotoisia sovelluksia laitteelleen, kun sellainen tarve tulee. Saatavilla myös Windowsille.

Quicklook plugin for provisioning profile files (ilmainen)

Provisiointiprofiilien kanssa tappelu on iOS-kehityksessä väistämättä vastaantuleva hupi. Tuskaa vähentää, jos voi kätevästi varmistua, että sovelluksen pitäisi teoriassa asentua halutulle laitteelle. Tämä kätevä lisäpalikka antaa Finderille kyvyn näyttää suoraan, mitkä testilaitteet sovelluksen provisiointiprofiiliin on lisätty.

UDID (ilmainen)

Jotta voisi varmistua, että oma puhelin on tuettu, pitäisi tietää puhelimen UDID-koodi. Sen saa selvitettyä iTunesilla, mutta Apple on tehnyt sen siinä määrin hankalaksi, että on usein helpompaa neuvoa ihmisiä asentamaan puhelimeen sovellus tätä varten. UDID on yksi näistä. Parempiakin saattaa olla.

Picturesque (11,99 €)

Törmäsin Picturesquehun vasta, mutta se näyttää lupaavalta. iPhone-sovelluksia tykätään usein esitellä heijastuksin je perspektiivitempuin kuorrutettuina. Picturesque tekee nämä yleisimmät efektit helposti ja antaa tallentaa kuvat myös läpinäkyvällä taustalla. Kätevä, jos kaipaat vapautusta Photoshopista.

 

iPhone-käytettävyystestilaboratorio yhden kaapelin hinnalla

Käytettävyystesti on yksi menetelmä sovellusten käytettävyyden tutkimiseen. Testissä havainnoidaan käyttäjää, joka suorittaa ennalta määriteltyjä tehtäviä vakioiduissa olosuhteissa. Näin päästään usein kiinni ongelmiin, joita suunnittelijat itse eivät ole tulleet ajatelleeksi ja joita käyttäjät eivät osaa kyselyissä tuoda esiin.

Perinteiset käytettävyystestit ovat kehittyneet psykologian alan tarkan tieteellisistä tutkimuksista, ja niillä on yhä hieman kankea maine. Testin järjestääkseen ei kuitenkaan välttämättä tarvitse puoliläpäiseviä seiniä ja salaisia tarkkailuhuoneita – ei edes valkoista laboratoriotakkia.  Steve Krugin Rocket Surgery Made Easy on hyvä katsaus ketterään käytettävyystestaukseen.

Mobiilisovellusten erityispiirteet

Mobiilisovellukset aiheuttavat omat haasteensa testaukselle. Verkkosivustoja testattaessa on helppoa istuttaa testihenkilö tietokoneen taakse ja luottaa, että hän pysyy paikoillaan. Esimerkiksi Silverback-sovelluksella saa kätevästi nauhoitettua näytön tapahtumat hiiren klikkauksineen ja näppäimenpainalluksineen sekä samalla ikuistettua käyttäjän puheet ja ilmeet koneen web-kameran avulla. iPhonen näyttöä ei kuitenkaan voi tallentaa samalla tavalla.

iPhone-testausta varten on nähty erilaisia hökötyksiä, joilla web-kameran saa kiinnitettyä puhelimeen, mutta puhelimen tuntuma muuttuu merkittävästi tällaisesta ylimääräisestä virityksestä. Toinen vaihtoehto on pitää puhelin jokseenkin paikallaan pyödällä ja käyttää staattista kameraa, mutta kovin realistista kuvaa käytöstä tämäkään ei anna.

Ulkoinen näyttö avuksi

iPhone 4S sallii viimein näytön kuvan peilaamisen sellaisenaan ulkoiselle näytölle, mikä mahdollistaa testauksen huomattavasti kameratelineitä luonnollisemmin. Näin se käy:

Testikäyttäjä istuu pöydän päädyssä. Testin vetäjä istuu hänen vieressään. Puhelimen kuva  näkyy testikäyttäjän takana.

Puhelin on kiinni näytössä kaapelilla, jolloin puhelinta voi pitää luontevasti kädessä ja tilanne vastaa pitkälti tavanomaista puhelimen käyttöä – sovelluksesta riippuen tietty.

Pöydällä lojuvan tietokoneen web-kamera kuvaa yhtä aikaa testikäyttäjää ja hänen takanaan näkyvää kuvaa puhelimen tapahtumista. Lisäksi tallennetaan testikäyttäjän ja testin vetäjän käymä keskustelu.

Tilanteen voi nauhoittaa esimerkiksi Quicktime-sovelluksella. Kannattaa valita laaduksi Maximum. (Yllä olevassa kuvakaappauksessa se tosin unohtui tehdä.)

Halutessaan kuvan voi jakaa myös edelleen esimerkiksi Skypen avulla. Näin useampi tarkkailija tai vaikka asiakkaan edustajat pääsevät näkemään, kuinka käyttö sujuu. Koska samaa kameraa ei voida nauhoittaa ja jakaa yhtä aikaa, yksi vaihtoehto on kuvapuhelun soittamisen sijaan jakaa Skypellä työpöytää, johon on jätetty auki tallentava Quicktime-ikkuna.

Jos näyttö on tarpeen jakaa usean osallistujan kesken, yksi kätevä ilmaispalvelu on join.me.

Loppupohdinta

Käytännössä tämäkin asetelma on hieman raskas. Usein riittää, että antaa puhelimen käyttäjän käteen ja katsoo vierestä, kuinka käyttö sujuu.

Toteutuksen heikoin lenkki on tietokoneen kamera, jonka tuottama kuvanlaatu paljastaa huonosti yksityiskohtia. Käytännössä yksityiskohdat tulevat kuitenkin usein esiin testihenkilön ja testin vetäjän keskustelusta. Parempaa kuvanlaatua tarvittaessa voidaan toki yhdistää ulkoinen kamera tietokoneeseen ja jakaa tämä kuva eteenpäin. Ihmisillä vain on tapana jännittää kameraa enemmän kuin harmitonta sammutetun näköistä tietokonetta.

Jos tarkkailuhuone on lähellä testitilaa, voidaan myös vetää kaapeli huoneiden välille ja yhdistää puhelin suoraan tarkkailuhuoneen näyttöön. Siitä huolimatta on hyödyllistä olla myös videoyhteys käyttäjään, jotta ilmeet ja eleet pystyy näkemään.

Web-testaukseen verrattuna testin vetäjän havainnointi korostuu tässä menetelmässä, sillä käyttäjän painallukset eivät näy ulkoisella näytöllä. Näin testin vetäjä on ainoa, joka näkee mitä käyttäjä todella tekee.

Tämäkin menetelmä rajoittuu pitkälti staattisesti käytettäviin sovelluksiin ja olettaa, että käyttäjä pysyy paikallaan.

Vastaava toteutus soveltuu samoin rajoituksin myös iPad-sovellusten testaamiseen. iPadit tukevat näytön jakamista alkaen versiosta 2.

Mitä voimme oppia Facebook-sovelluksen kotinäkymän kehityksestä?

Applen tarjoama standardiratkaisu iPhone-sovelluksen osiosta toiseen liikkumiseen on enimmillään viisipaikkainen tab bar. Jos on tarvetta useammalle osiolle, viimeiseksi valinnaksi voidaan laittaa kolme pistettä, ja sijoittaa tämän taakse listamuodossa lisäkohteita.

Apple tulee omissa sovelluksissaan toimeen tällä ratkaisulla, mutta usein on tarvetta toteuttaa navigaatio jotenkin muuten. Tärkeitä kohteita saattaa olla enemmän kuin viisi tai näytön pinta-ala haluttaisiin tehokkaammin käyttöön, eikä näytön alalaitaa raaskita varata navigointipalkille.

Facebookin iPhone-sovellus käytti alkuaikoinaan myös tätä ratkaisua. Ohessa kuvakaappaus versiosta 2.0 (cnet.com).

Kuvassa pistää erityisesti silmään vaikeakäyttöinen vieritettävä navigointipalkki välilehtirakenteen alapuolella. Muistan, ettei sen kanssa ollut mukava näpertää. Tab bar, välilehdet, vieritettävä palkki – on siinä hierarkiaa kerrakseen! Ei ihme, että Facebook päätti panna navigaation uusiksi sovelluksen 3.0-versiossa.

Versiossa 3.0 esiteltiin sittemmin varsin laajasti käytetty kotinäkymäpatterni, jossa päänavigaatio on koko ruudun kokoinen. Skaalautuminen hoidetaan samaan tapaan kuin iPhonen kotinäytöllä, näyttö kerrallaan vaakasuunnassa vierittämällä. (kuva Ars Technica)

Etuna on, että kohteita mahtuu näkyviin enemmän kuin tab bariin ja näkymästä saadaan visuaalisempi. Valikko ei myöskään haaskaa tilaa muilta näkymiltä. Haittapuolena on, että valikko täytyy avata erillisellä painalluksella.

Päädyimme vastaavaan ratkaisuun viime kesänä myös Taloussanomien iPhone-version kanssa. Ensin toteutetussa iPad-versiossa tärkeimmät osiot olivat mahtuneet näkyviin vaakasuuntaiseen palkkiin, mutta puhelimen ruudulla olisi tullut ahdasta emmekä halunneet tuoda ylimääräistä palkkia pystysuuntaista tilaa viemään, joten toteutimme kotinäkymäratkaisun.

Facebookiin tapaan sovellus aukeaa ensisijaisesti tärkeimpään uutisnäkymään, ja kotinäkymään pääsee erikseen painamalla. Käytimme painikkeen symbolina Facebookista poiketen talon kuvaa, sillä Facebookin käyttämä kuva toi liikaa mieleen list/grid-painikkeen.

Pian saimme huomata, että ratkaisu oli juuri mennyt muodista. Facebookin nykyinen versio toi mukanaan uuden version kotinäkymästä. Se ei enää olekaan erillinen koko ruudun näkymä, vaan näytön reunasta aukeava osittain valitun näkymän alle peittoon jäävä lista. Vierityssuunnaksi on valittu jälleen Applen standardin more-näkymän tapaan pystysuunta.

Jos vanha kotinappi näytti grid-valinnalta, uusi näyttää vastaavasti list-napilta…

Raa’asti painallusten määrällä analysoiden tämä lähestymistapa ei ole sen tehokkaampi kuin aiempi koko ruudun kotinäkymä. Yhtä lailla se vaatii yhden painalluksen aueatakseen ja samaan tapaan se estää nykyisen näkymän käytön valikon ollessa auki. Henkinen etäisyys osittain nykyisen näytön takaa aukeavaan valikkoon sen sijaan tuntuu lyhyemmältä.

Valikon vaikutelma ei ole yhtä visuaalinen kuin koko ruudun kotinäkymän ja mikä yllättävintä, listaan ei mahdu sen enempää kohteitatakaan. Aiempaan kotinäkymään mahtuu hakuluukku ja yhdeksän kohdetta. Uudessa listassa on hakuluukun lisäksi vain kahdeksan kohdetta.

Niin tai näin, uusi patterni on jo osoittautunut suosituksi. Google on ottanut sen käyttöönsa iPhonen Gmail-sovelluksessa oleellisella parannuksella: valikon saa näkyviin ja piiloon valikkonapin lisäksi sormella pyyhkäisemällä.

Viimeiseen asti hiotusta käyttöliittymästään tunnettu oman elämänsä facebook Path on toteuttanut kenties hienoimman version tästä lähestymistavasta. Valikko aukeaa Gmailin tapaan pyyhkäisyeleellä, mutta toimii huomattavasti pehmeämmin joustopomppuineen kaikkineen. Vastaavasti osiosta toiseen siirryttäessä se animoituu hetkeksi pois näkyvistä ja palaa takasin niin, että näkymä on jo valmiiksi piirretty.