Sovellussuunnittelun prototyyppi

Uudet mobiililaitteet asettavat UX-suunnittelijoiden eteen uusia haasteita, jotka aiheuttavat merkittäviä muutoksia perinteisiin työskentelytapoihin. Yli vuosikymmenen ajan lankakehykset ja mallinnukset ovat kenties olleet yleisimpiä tapoja simuloida ja vahvistaa verkkosivuston käyttöliittymää, asettelua, navigointia, rakennetta, sisältöä ja ulkoasua.

Voivatko langalliset kehykset ja mallinnukset simuloida riittävästi mobiilisovelluksia verkkosivustojen tapaan? Pitäisikö suunnittelijoiden ja UX-ammattilaisten työskennellä edelleen samojen prosessien ja työkalujen kanssa, joita he käyttävät verkkosivustoissa, kun he tekevät mobiilisovellusten suunnittelua?

Tässä artikkelissa verrataan verkkosivujen suunnittelua ja mobiilisovellusten suunnittelua rinnakkain, jotta voidaan tunnistaa kahden tieteenalueen perustavanlaatuiset erot. Tutkimme myös verkkosivuston prototyyppien tekemiseen käytettyjä tekniikoita (esim. Luonnokset, mallinnukset, lankakehykset) ja tutkimme, ovatko nämä tekniikat riittäviä mobiilisovellusten prototyyppien tekemiseen.

01. Kenelle prototyyppimme ja miksi?

Kun otetaan huomioon maailmanlaajuisen verkon lyhyt historia, voidaan väittää, että verkkosuunnittelu ja erityisesti mobiilisuunnittelu ovat vielä lapsenkengissään. Yrittäessämme selviytyä tästä jatkuvasti muuttuvasta teollisuudesta meidän, suunnittelijoiden ja koodereiden, on usein keksittävä ja löydettävä uusia tapoja luoda verkkosivustoja ja mobiilisovelluksia. Tärkeä vaihe web- ja mobiilisuunnitteluprosessissa on prototyyppien luominen.

Teollisen vallankumouksen syntymästä lähtien prototyyppien valmistus on ollut yksi alkuvaiheista minkä tahansa tuotteen rakennusprosessissa. Prototyyppi on varhainen näyte tai malli, joka on rakennettu konseptin tai prosessin testaamiseksi tai toimimaan objektina, josta on tarkoitus toistaa tai josta oppia. Prototyyppivaihe ohitetaan usein lisäkustannusten ja vaivojen takia, jotka se lisää projektin elinkaareen.

Nykyään kehitysmaailmassa on kuitenkin yleisesti hyväksyttyä, että tämän elintärkeän osan aliarviointi voi johtaa: väärään viestintään kehittäjien ja asiakkaiden välillä; sudenkuoppia; yli budjetointi; ja huonolaatuisia tuotteita. Siksi voimme kohtuudella väittää, että prototyyppien tekeminen on välttämätöntä.

On useita syitä, miksi useimmat ammattilaiset ovat asettaneet prototyyppien muodostamisen perustavaksi kehitysprosessissa. Seuraavat ovat tärkeimpiä:

  1. Testata ehdotetun ratkaisun yleinen ajatus
  2. Testaa navigointi ja sisällön kokonaisrakenne
  3. Käyttöliittymän, sisällön ja kontekstin sekä ydintoimintojen testaaminen
  4. Testata ulkoasua ja visuaalista estetiikkaa
  5. Käyttäjäkokeiden suorittaminen käytettävyyden ja käyttökokemuksen parantamiseksi
  6. Tutkitaan mahdolliset sudenkuopat hyvissä ajoin

02. Ja kenelle prototyyppimme?

  1. Sidosryhmät: asiakas tai yritysjohtajat, päättäjät, joiden on hyväksyttävä suunnittelu, ulkoasu, sisältö ja toiminnallisuus ennen koodausta ja toteutusta
  2. Kehittäjät ja koodaajat, joiden on ymmärrettävä selkeästi, mahdollisimman yksityiskohtaisesti, mitä on rakennettava ennen kuin he hyppäävät koodaukseen

Ensinnäkin prototyyppien perustavoitteena on todellisen rakentamisen aloittamisen sijaan testata, korjata virheet ja vahvistaa suunnittelun keskeiset päätökset käyttäjien kanssa ilman, että siitä aiheutuu kehityskustannuksia. Prototyyppien hinta. Mutta prototyypin kustannukset ovat vähäiset verrattuna uudelleensuunnittelun kustannuksiin, kun puolivälissä tai tehdään koodaavan osan kanssa. Näin ollen pätevin argumentti sille, miksi meidän on prototyyppi, on minimoida sekä kustannukset että riskit ja samalla saavuttaa suurin tehokkuus ja laatu.

03. Sivuston prototyyppitekniikat

On olemassa useita tekniikoita ja työkaluja, joita voidaan käyttää ja käyttää. Suosituimpia ovat luonnokset, lankakehykset, maketit ja koodaus.

Päätös siitä, mitä prototyyppimenetelmää meidän tulisi käyttää, kun haluamme visualisoida verkkosivustoa, ei aina ole valinnan tai mieltymyksen asia. Se riippuu yleensä projektin koosta ja luonteesta sekä aika- ja budjettirajoituksista, jotka saattavat määrätä yhden tai toisen menetelmän.

Tekniikan valinta tietylle projektille määräytyy seuraavien kriteerien mukaan:

  1. Aika
  2. Uskollisuus, joka voi vaihdella matalasta tarkkuudesta (käsin piirretyt viivat ja laatikot) korkeaan tarkkuuteen (pikselin täydellinen muotoilu)
  3. Tarvitseeko sinun jakaa prototyyppi tiimin jäsenten ja sidosryhmien kanssa
  4. Tarvitseeko sitä käyttää käyttäjäkokeisiin ja käytettävyystestauksiin

Sivuston prototyyppitekniikat

Sivuston prototyyppitekniikat

Jokainen menetelmä palvelee tarkoitusta ja se voi olla paras vaihtoehto tietyntyyppisille verkkosivustoille. Joskus optimaalisen tuloksen saavuttamiseksi tarvitaan tekniikoiden yhdistelmää.

04. Verkko vs. mobiili: niin samanlainen, mutta niin erilainen

Yllä olevat tekniikat ovat erinomaisia ​​verkkosivujen suunnittelulle ja voivat todella nopeuttaa ja parantaa kehitysprosessia merkittävästi, minkä vuoksi on järkevää harkita samojen tekniikoiden käyttöä mobiilisovelluksissa. Loppujen lopuksi, eroavatko mobiilisovellukset verkkosivustoista? Ne molemmat: ovat digitaalisia, edellyttävät käyttäjän vuorovaikutusta, esittävät sisältöä ja palvelevat tarkoitusta. Joten ovatko he todella niin erilaisia? No kyllä!

halvat MacBook Pro -kotelot 13 tuumaa

Mobiilisovellukset eroavat verkkosivustoista monin tavoin. Harkitse seuraavia hyvin perusominaisuuksia: verkkosovellukset toimivat eri laitteilla, joilla on erilainen käyttöjärjestelmä, erikokoisia ja erilaisia ​​ominaisuuksia. Sivustot toimivat minkä tahansa käyttöjärjestelmän verkkoselaimessa yleensä suurilla tarkkuuden näytöillä. Mobiilisovellukset saavat syötteen kosketusnäytöltä. Verkkosivustot saavat syötteen näppäimistöltä ja hiireltä. Ja luetteloa jatketaan.

Verkkosivustojen ja mobiilisovellusten vertailutaulukko

Verkkosivustojen ja mobiilisovellusten vertailutaulukko

05. Mobiiliprototyypit: uusi paradigma

Joten palatakseni takaisin alkuperäiseen kysymykseen, pätevätkö samat periaatteet mobiiliprototyyppien tekemisessä kuin web-prototyyppien tekemisessä? Pitäisikö prototyyppien tekemisessä käytettyjen tekniikoiden olla samat? Ei. Mobiiliprototyypit ovat täysin uusi paradigma. Emme yksinkertaisesti pysty tuottamaan realistisia prototyyppejä mobiilisovelluksille luonnosten, lankakehysten ja mallien avulla kolmesta yksinkertaisesta, mutta perustavanlaatuisesta syystä: vuorovaikutus, animaatiot ja laitetestaus.

06. Vuorovaikutukset

Vuorovaikutukset ovat avaintekijä, joka tekee muutoksen välttämättömäksi. Verkkosivuston lankakehystä tai mallia rakennettaessa vuorovaikutus on vähäistä. Suurimman osan ajasta meillä on vain yksi tapahtuma: napsautus, tulosten napsauttaminen sivun muutokseen ilman siirtymiä. Animaatioita (ainakin viime aikoihin asti) ei ollut olemassa. Siksi verkkosivuston visualisointi tai prototyyppien muodostaminen on mahdollista myös käsin piirretyillä luonnoksilla, joissa on yksi paperiarkki kullekin sivulle ja yksi sana tai yksinkertainen selitys jokaiselle vuorovaikutukselle.

Mobiilisovellukset esittävät kuitenkin aivan uudenlaisen vuorovaikutuksen maailman antamalla käyttäjien olla vuorovaikutuksessa useiden kosketustapahtumien kanssa, kuten napauttaminen, napauttaminen, pyyhkäisy, nipistäminen, zoomaus. Sama näyttö (tai sivu) voi reagoida eri tavoin eri vuorovaikutuksiin. Useampaa kuin yhtä vuorovaikutusta voidaan soveltaa yhteen käyttöliittymän elementtiin. Ota esimerkiksi Twitter-sovelluksen uusin versio. Jos napsautamme Minä-välilehden kuvaketta, se vie meidät tilin yhteenvetonäyttöön. Mutta jos pyyhkäisemme sormella samaa kuvaketta, se vie sinut vaihtamaan tiliä -sivulle. Ja tämä on vain yksi yksinkertainen esimerkki miljoonista. Kuinka simuloimme ja esitämme sen sidosryhmille luonnoksella, lankakehyksellä tai mallilla? Kuinka simuloimme yhden ja kahden sormen kosketusta, pyyhkäisyä ja kaikkia muita kosketustapahtumia?

Esimerkki kahdesta vuorovaikutuksesta (napauta ja pyyhkäise) samassa käyttöliittymäelementissä

Esimerkki kahdesta vuorovaikutuksesta (napauta ja pyyhkäise) samassa käyttöliittymäelementissä

07. Animaatiot

Animaatiot tekijänä edistävät huomattavasti parempaa käyttökokemusta. Mobiilisovellukset, joiden kiinteistöomaisuus on rajoitettu, luottavat suuresti animaatioihin luodakseen kiinnostavia käyttäjien vastauksia ja hyödyntävät rajallista tilaa. Näytölle liukuvat valikot, näkyvät ja katoavat käyttöliittymän elementit ja siirtymät näyttöjen välillä ovat vain joitain animaatioita, joita kohtaamme melkein kaikissa sovelluksissa. Ajattele nyt yleistä Facebook-sovelluksen diavalikkoa. Kuinka simuloimme sitä luonnoksen, lankakehyksen tai mallin avulla? Entä valikkojen vieritys, valikkokohteiden pyyhkäisy?

Napsauta alla olevaa kuvaa nähdäksesi interaktiivisen mobiiliprototyypin, joka simuloi sisäänrakennettua diavalikkoa Proto.io :

Katso lisää interaktiivisia prototyyppiesimerkkejä .

08. Laitteen testaus

Yksi tärkeä osa prototyyppien muodostamista on testaus. Lankakehysten ja mallien uskollisuudesta riippumatta ne voidaan helposti testata todellisella laitteella, joka on tietokoneen selain. Sama koskee mobiiliprototyyppejä. UX-suunnittelijoiden on voitava testata mobiiliprototyyppejä varsinaisella laitteella, jolle he on rakennettu. Testauksella en tarkoita vain napsautettavien kuvien katselemista varsinaisella laitteella, vaan sen sijaan, että suoritan mobiilisovelluksen koko interaktiivisen prototyypin. Laitteiden todellinen testaus on paras tapa sidosryhmille konseptoida lopputuote ja mahdollistaa samalla perusteelliset ja arvokkaat käyttäjäkokeilut. Mobiiliprototyypit ovat yksi niistä asioista, jotka antavat meille edun kokea prototyyppi todellisessa ympäristössä ikään kuin se olisi todellinen.

miksi kromikuvakkeellani on 1

09. Mobiilit prototyyppien valmistustekniikat ja työkalut

Uskon, että prototyyppien luominen alkaa yleensä luonnoksista. Se on kaikkein intuitiivisin asia. Luonnoksia löytyy melkein kaikilta aloilta - käsityöläisistä avaruusalusten suunnittelijoihin. Se on nopein tapa ilmaista ajatuksemme visuaalisesti, tarvitsemme vain lyijykynää ja paperia, ja se on hyvä tapa aloittaa. Emme kuitenkaan voi simuloida interaktiivisen sovelluksen toimintaa, ellemme pysty edistämään luonnoksia interaktiiviseen prototyyppitilaan, joka voidaan testata todellisella laitteella.

Joten miten panemme luonnoksemme, lankakehyksemme ja mallimme toimintaan? Mobiiliteollisuudessa käytetään useita tekniikoita: paperiprototyypit, perinteiset esitysohjelmistot, prototyyppeihin suunnitellut mobiilisovellukset, lähdekoodi sekä erikoistuneet web- ja työpöytäprototyyppisovellukset.

Paperin prototyyppien tekeminen vie aikaa ja taitoa, ja prototyyppejä on vaikea rakentaa ja muokata. Se voi antaa meille hyvän ymmärryksen sovelluksen toiminnasta, mutta sitä ei varmasti voida testata todellisella laitteella.

Esitysohjelmistot, kuten Applen Keynote ja Microsoftin Powerpoint, tukevat joitain animaatioita ja siirtymiä. Ne ovat kuitenkin työkaluja, jotka on rakennettu aivan eri tarkoitukseen. Myöskään laitetestaus ei ole mahdollista.

Mobiiliprototyyppien suunnitteluun suunnitellut Apple iPad- ja Google Android -tablettien mobiilisovellukset mahdollistavat todellisen laitetestauksen, mikä on niiden suurin etu. Ne rajoittuvat kuitenkin yhden laitteen prototyyppeihin, ja niiltä puuttuu yleensä jakamis- ja yhteistyötyökalut. Lisäksi työskentely iPadin tai iPhonen kanssa prototyypin rakentamiseksi ei ole vieläkään yhtä nopeaa ja tehokasta kuin tietokoneella.

Lähdekoodi tarjoaa tehokkaan tavan prototyyppiin, koska käytännössä ei ole rajoituksia sille, kuinka pitkälle voimme mennä. Voimme luoda mobiiliprototyypin HTML5 tai sen todellisen ohjelmointikielen kanssa, jota aiomme käyttää, kuten tavoite C tai Java . Lähdekoodin prototyyppien tekeminen on kuitenkin ehdottomasti aikaa vievää, ja voimme helposti saada pienet yksityiskohdat viettämään enemmän aikaa siihen, mitä meidän pitäisi.

Mobiiliprototyyppisovellukset ovat verkkosovelluksia tai ohjelmistoja, jotka on suunniteltu erityisesti mobiiliprototyyppien muodostamista varten. Nämä sovellukset ylittävät perinteiset lankakehys- tai mallisovellukset tarjotakseen toiminnallisuutta mobiilitapahtumille ja -eleille, vuorovaikutuksille, näytön siirtymille ja mikä tärkeintä, tarjoavat mahdollisuuden esikatsella prototyyppiä varsinaisessa laitteessa.

Interaktiiviset mobiiliprototyyppitekniikat ja -työkalut

Interaktiiviset mobiiliprototyyppitekniikat ja -työkalut

Esimerkki tällaisesta mobiiliprototyyppisovelluksesta on Proto.io . Proto.io on prototyyppityökalu, joka on rakennettu erityisesti mobiilisovellusten prototyyppien tekemiseen. Se tarjoaa helpon ja nopean tavan prototyyppiä mobiilisovelluksia, jotka voidaan testata todellisella laitteella, samalla kun se tukee kaikkia uusia ainutlaatuisia mobiiliominaisuuksia, kuten kosketuseleitä, animaatioita ja useita vuorovaikutuksia. Se tarjoaa myös sisäänrakennettuja työkaluja viestinnän, yhteistyön ja jakamisen helpottamiseksi kehitystiimin ja asiakkaan välillä.

10. (Lankakehykset || Maketit)! = Prototyypit

Yhteenvetona voidaan todeta, että mobiiliprototyypit ovat täysin uusi paradigma. Perinteiset tekniikat ja työkalut, kuten luonnokset, lankakehykset ja kuviot, voivat esittää mobiilisovelluksia vain staattisella tavalla. Mobiilisovelluksen staattinen esitys ei riitä. Mobiilisovelluksen prototyyppien on tarjottava käyttäjän ja käyttöliittymän välisen lopullisen vuorovaikutuksen simulointi. Kun kehitämme mobiilisovelluksia, meidän on luotava täysin vuorovaikutteisia, jaettavia prototyyppejä, jotka tukevat monikosketuseleitä, mahdollistavat käyttäjien kokeilut ja käytettävyyden testaamisen ja joita voidaan esikatsella todellisilla mobiililaitteilla.

Tämän saavuttamiseksi meidän on irrotettava perinteisistä web-prototyyppitekniikoista, joihin olemme tottuneet. Meidän on aloitettava uusien mobiilisovellusten prototyyppien valmistustekniikoiden ja työkalujen käyttö, jotka tyydyttävät mobiilisovellusten prototyyppitarpeemme ja antavat meille mahdollisuuden keskittyä luovuuteen ja kekseliäisyyteen. Sitten voimme vapaasti rakentaa mobiilisovelluksia, jotka tarjoavat ainutlaatuisia käyttökokemuksia.

Alexis on tuotteen tuotearkkitehti ja toimitusjohtaja Proto.io , mobiilisovelluksen prototyyppialusta.

Piditkö tästä? Lue nämä!