High-Fidelity & Low-Fidelity Prototyping: mitä, miten ja miksi?

itse asiassa termejä ”high fidelity” ja ”low fidelity” käytettiin aluksi rockmusiikissa kuvaamaan rock and rollin ääni-ja soittotaitoa 1980-luvun lopulla. vuosien kuluessa niitä käytetään myös web/app-suunnittelussa viitatakseen prototyyppiin rakennettuihin yksityiskohtien ja toiminnallisuuden eritasoisiin piirteisiin.

kuitenkin, mitkä ovat todelliset erot niiden välillä, miten ja miksi meidän pitäisi valita korkean tai matalan uskollisuuden prototyyppi paremman suunnittelun tai käyttäjätutkimuksen aikaansaamiseksi?

seuraavassa selitän sinulle high Fidelityssä ja low Fidelityssä piilevät perusasiat ja erot ja selitän, miksi ja miten valita ne tekemään erinomaisia prototyyppejä parempaan suunnitteluun tai käyttäjätutkimukseen.

Sisällysluettelo:

• First, what is a prototype
• What is a low fidelity prototype
• What is a high fidelity prototype
• Difference between high fidelity and low fidelity prototype
• How and why to choose hi-fi or low-fi prototype for a better design
• Best prototyping tool web/app design

ensimmäinen, mikä on prototyyppi?

” prototyyppi on varhainen näyte, malli tai julkaisu tuotteesta, joka on rakennettu testaamaan konseptia tai prosessia. Se on termi, jota käytetään useissa eri yhteyksissä, kuten semantiikassa, muotoilussa, elektroniikassa ja ohjelmoinnissa.”- – – – Wikipediasta.

käyttöliittymäsuunnittelussa prototyyppi auttaa suunnittelijoita muuntamaan suunnitteluideansa digitaaliseksi ja konkreettiseksi malliksi. Ne voivat suoraan testata osia tai kaikkia UIs -, vuorovaikutus-ja UX-virtoja nähdäkseen, ovatko ne toimivia ja poistettavissa.

lisäksi, koska ryhmien tarpeet vaihtelevat, he tekevät myös low fidelity prototyypin tai high fidelity prototyypin testatakseen suunnitteluideoitaan eri tarkoituksiin.

mikä on Low Fidelity-prototyyppi?

low-tech, low – fi tai lo-fi-prototyyppi on puolivalmis prototyyppi, joka keskittyy toimintaan, rakenteeseen, prosessiin ja tarjoaa yksinkertaisimmat puitteet ja elementit web/app. Sitä käytetään usein kääntämään suunnitteluideoita testattaviksi ja konkreettisiksi esineiksi, joiden avulla kerätään ja analysoidaan käyttäjän vaatimuksia varhaisessa vaiheessa.

sitten, mikä on hifi-prototyyppi?

hifi-prototyyppi, joka tunnetaan nimellä high-tech, high-fi tai hi-fi, on kattava ja interaktiivinen prototyyppi, joka on melko lähellä lopputuotteita ja jossa on paljon toimintoja, vuorovaikutuksia ja yksityiskohtia. Sitä käytetään usein myöhemmin käytettävyyden arviointi löytää mahdollisia ongelmia, että web / app design voi olla vielä olemassa.

ero High Fidelity-ja Low Fidelity-prototyyppien välillä

etkö vieläkään tiedä eroja low-fidelity-ja high-fidelity-prototyyppien välillä? Älä huoli! Tässä 3 todellista low-fidelity-prototyyppiesimerkkiä, joiden avulla voit oppia lisää low-fi-prototyypeistä:

1. Low Fidelity Motion Prototype Example

tämä low-fi-prototyyppi näyttää toisen valikon liikkeet selvästi keskittymättä liikaa sen käyttöliittymän yksityiskohtiin.

2. Low Fidelity UX prototyyppi esimerkki sivuston rakentaja

tämä low fidelity UX-prototyyppi esittelee sivun asettelut, navigointijärjestelmät ja vuorovaikutusten käyttäjävirrat selvästi ilman liikaa käyttöliittymän yksityiskohtia. Se auttaa suunnittelijoita testaamaan oletuksia ja löytämään näkymättömiä UX-ongelmia nopeasti.

3.Lo-fi prototyyppi esimerkki tarjous

tämä on toinen hyvä esimerkki (luotu Mockplus, helpompi nopeampi ja älykkäämpi prototyyppityökalu) näyttää sovelluksen tärkeimmät asettelut ja elementtien sijoittelut. Ilman elementtitietojakin se auttaa suunnittelijoita havaitsemaan ja puuttumaan mahdollisiin ongelmiin varhaisemmassa vaiheessa.

näetkö sen? Jopa ilman käyttöliittymän yksityiskohtia low-fi-prototyyppi auttaa välittämään suunnitteluideoita ja näyttämään web/app: n tärkeimmät toiminnot, rakenteet, virrat ja vuorovaikutukset helposti. Se tuo suunnittelijoille paljon etuja.

low fidelity-prototyyppien edut:

• Edullinen. Vähäpukeisen prototyypin hinta on äärimmäisen alhainen.
• nopea. Keskittymättä jokaiseen käyttöliittymän yksityiskohtiin, suunnittelijat voivat vain seurata suunnitteluideoitaan ja luoda yksinkertaisen ja testattavan prototyypin muutamassa minuutissa.
• helppo demonstroida, tehdä yhteistyötä ja iteroida. Ilman liikaa KÄYTTÖLIITTYMÄTIETOJA matala-fi-prototyyppi ei vaadi montaa ammattitaitoa. Ja useampi ihminen voi liittyä ja tehdä yhteistyötä samassa projektissa. Suunnittelijoiden on myös helppo tehdä muutoksia ja iteroida prototyyppi yhteistyön aikana.
• helppo saada palautetta. Koska low-fidelity prototyyppi on helppo kuljettaa ja esitellä, suunnittelijat voivat myös jakaa sen suoraan muille ihmisille (mukaan lukien tiimin jäsenet ja sidosryhmät) kerätäkseen suunnittelupalautetta.
• mahdolliset ongelmat on helppo havaita ja ratkaista. Low-fidelity prototyyppi mahdollistaa myös suunnittelijoiden testata käyttäjä virtaa, vuorovaikutusta ja navigointi valikot web/app helposti. Suunnittelijoiden on hyvä havaita ja ratkaista mahdolliset UI / UX-ongelmat nopeasti.

heikon uskollisuuden prototyyppien haitat:

• rajalliset käyttöliittymän tiedot / animaatiot / vuorovaikutukset. Jotta ideat välittyisivät nopeasti, low-fidelity-prototyyppi luodaan usein rajallisilla KÄYTTÖLIITTYMÄTIEDOILLA, toiminnoilla, animaatioilla ja vuorovaikutuksilla jne. Niin, se ei ole hyvä muille suunnittelijoille tai tiimin jäsenille on täysi ymmärrys web / app design.
• testitulokset ovat rajallisia ja epätarkkoja. Ilman tarpeeksi suunnittelun yksityiskohtia, low fidelity prototyyppi, jossain määrin, ei voi tarkasti simuloida todellisia käyttäjä skenaarioita. Myös testitulokset vaikuttavat väistämättä ja ovat epätarkkoja. On tarpeetonta sanoa, että kun prototyyppiä muutetaan dramaattisesti myöhemmässä vaiheessa, testitulokset voivat olla täysin erilaiset.

joten, jos saat vain joitakin suunnitteluideoita, haluat esitellä ne yksinkertaisella prototyypillä, keskustella ja tehdä yhteistyötä muiden suunnittelijoiden tai tiimin jäsenten kanssa ennen kuin kaivaudut mukaan, low fidelity-prototyyppi on täydellinen sinulle.

ja sitten, tässä 3 todellista hifi-prototyyppiesimerkkiä, joiden avulla voit oppia lisää high-fi-prototyypeistä:

1. Job List High Fidelity Prototype Example

Tämä high fidelity-prototyyppi ei ainoastaan näytä käyttöliittymän yksityiskohtia, vaan näyttää myös käyttäjävirrat ja vuorovaikutukset selvästi. Suunnittelijat voivat helposti tarkistaa ja testata hyvin pieniä yksityiskohtia nähdäkseen, onko vielä joitakin UI / UX-ongelmia.

2. High Fidelity Prototype Esimerkki

3. Tuotesuunnittelu High Fidelity Prototype esimerkki

hifi-prototyypin avulla voit välittää suunnitteluideoita rikkailla väreillä, painikkeilla, valokuvilla, kuvakkeilla, animaatioilla, vuorovaikutuksilla ja muilla yksityiskohdilla.

hifi-prototyyppien edut:

• rikas muotoilu yksityiskohtia. Hifi-prototyypit on rakennettu enemmän HQ kuvia, värejä, animaatioita, kuvakkeita, painikkeita ja muita elementtejä. Jokainen elementti on suunniteltu aivan kuin se olisi todellinen verkkosivuilla / sovellus.
• parempi visuaalinen efekti. Hieno värimaailma, eloisat animaatiot, asettelut ja paljon muuta, hifi-prototyypillä on myös usein paremmat visuaaliset efektit kuin low-fidelity-prototyypillä.
• tarkemmat testitulokset. Rikas yksityiskohtia, hifi-prototyyppi vain näyttää todellinen web / app. Suunnittelijoiden on helppo simuloida todellisia käyttäjäskenaarioita ja testata tuotetta kaikista mahdollisista näkökulmista, mukaan lukien vuorovaikutukset, käyttäjävirrat, elementtitehosteet ja värimaailmat sekä UX. Testitulokset ovat myös paljon tarkempia.
• tehokkaampi palaute. Tietenkin, kun se on jaettu muille suunnittelijoille ja tiimin jäsenille, saatu palaute on myös tehokkaampaa puuttua olemassa oleviin ongelmiin.
• houkuttelevampi asiakkaille ja sidosryhmille. On myös hyvä, että suunnittelijat esittävät selkeästi, miten lopullinen web / sovellus on tarkoitus toimia ja auttaa houkuttelemaan lisää asiakkaita, sidosryhmiä ja sijoittajia.

hifi-prototyyppien haitat:

• korkeampi hinta. Hifi-prototyyppi on usein luotava ammattimaisella prototyyppityökalulla. Verrattuna low-fidelity-prototyyppiin sen hinta on varmasti paljon korkeampi.
• vaikea muuttaa ja iteroida. Kun joitakin muutoksia tehdään, myös hifi-prototyypin sivuja tai elementtejä on muutettava samanaikaisesti. Tämä voi olla hankalaa ja aikaa vievää.

niin, hifi-prototyyppi on erittäin toimiva ja interaktiivinen sinulle ja tiimillesi löytää ja ratkaista joitakin pieniä UI/UX-ongelmia, sekä saada lisää osakkeenomistajia ja asiakkaita aivan loppuvaiheessa suunnitteluvaiheessa.

miten ja miksi valita Hi-fi-tai Low-fi-prototyyppi paremman muotoilun toivossa?

kuten edellä on mainittu, koska high fidelity ja low fidelity näyttelevät hyvin erilaista roolia onnistuneiden mallien luomisessa, kannattaa niitä käyttää myös eri hankinnoissa tai suunnitteluvaiheessa:

1.Miksi low fidelity prototyyppi on parempi sinulle varhaisessa suunnitteluvaiheessa?

on selvää, että low fidelity-prototyyppi keskittyy enemmän lopputuotteiden korkean tason käsitteisiin ja auttaa löytämään mahdolliset ongelmat sekä ratkaisemaan ne hyvin varhaisessa vaiheessa.

se auttaa varmistamaan, että sinä ja tiimisi olette valinneet ja noudattaneet oikeaa suunnitteluteemaa ja suuntaa ennen kaivautumista.

joten alkuvaiheessa, kun sinä ja tiimisi pyritte kääntämään ideat nopeasti visualisoiduiksi prototyypeiksi, lyhentämään iteraatioita ja keräämään käyttäjäpalautetta, low fidelity-prototyyppi on paljon parempi valinta.

lyhyesti sanottuna, milloin on oikea aika käyttää low-fi-prototyyppiä?

• kun suunnitteluidea vilahtaa mielessäsi ja haluat muuttaa sen konkreettiseksi malliksi nopeasti
• kun haluat keskustella suunnitteluideoistasi kumppaneidesi kanssa mahdollisimman pian
• kun haluat testata ovatko suunnitteluideat toteuttamiskelpoisia ja käyttäjien tarpeiden mukaisia
• kun haluat saada palautetta muilta tiimin jäseniltä

miksi high fidelity-prototyyppien valmistaminen on sinulle parempi juuri loppuvaiheessa?

ja sitten, koska hifi-prototyyppi kiinnittää usein paljon huomiota web/sovelluksen yksityiskohtiin ja toimintoihin, suunnittelijoiden on usein parempi testata web/app-mallien toteutettavuutta ja houkutella lisää käyttäjiä/sidosryhmiä aivan loppuvaiheessa.

lyhyesti sanottuna, milloin on paras aika käyttää high-fi-prototyyppiä?

• kun tuotteesi visuaalinen suunnittelu on tehty
• kun haluat testata web – /app-tietojasi, kuten käyttöliittymäelementtejä, värimaailmoja ja sivukopioita jne
• kun haluat testata vuorovaikutusta, työnkulkua, käyttäjävirtaa, siirtymäanimaatiota, visuaalisia tehosteita tai vastaavia suunnitteluideoita täydellisillä KÄYTTÖLIITTYMÄTIEDOILLA
• kun haluat tietää muiden suunnittelijoiden palautteen ja käyttäjät

miten valita oikea prototyyppityökalu parempaan suunnitteluun?

riippumatta siitä, valitsetko high fidelity-vai low fidelity-prototyypin, ainoa tarkoitus on esitellä fantastisia suunnitteluideoitasi elävämmin ja rakentaa erinomaisia web/app-prototyyppejä, eikö? Jos vastauksesi on” kyllä”, seuraava askel sinulle on valita oikea prototyyppityökalu.

mutta ei vieläkään tiedä miten? Tässä useita vinkkejä suosittelijoillesi:

• Price. Hinta on aina tärkein tekijä valita low-fi tai high-fi prototyyppityökalu. Se ei kuitenkaan ole ainoa tekijä, joka kannattaa ottaa huomioon. Halpa tai kallis hinta ei kerro mitään. Tarvitset vain sen, joka sopii sinulle parhaiten.
• oppimiskäyrä. Kuinka kauan sinulta ja tiimiltäsi kestää oppia uusi työkalu, on aina tärkeää, kun valitset oikean prototyyppityökalun. Niin, jos et halua tuhlata aikaa tutkia uusia ominaisuuksia työkalun, se on parasta voit valita helpompaa.
• käyttö. Nykyään, on olemassa paljon prototyyppien työkaluja siellä, jotka tarjoavat täysin erilaisia ominaisuuksia. Voit valita sinulle ja tiimillesi sopivimman, on parasta tietää, mitä ominaisuuksia tarkalleen tarvitset tuotesuunnitteluprosessissasi. Niin, se on tarpeen voit selvittää todellisia tarpeita tiimisi jäsenten eri osastojen etukäteen.
• tiimityöskentely. Keskustellakseen suunnitteluideoista ja saadakseen palautetta muilta tiimin jäseniltä ajoissa useimmat suunnittelijat / suunnittelutiimit valitsevat mieluummin prototyyppityökalun, joka tukee tiimityötä. Tarvitsetko sitäkin? Jos teet niin, työkalu, jonka avulla sinä ja tiimisi voitte kommunikoida ja tehdä yhteistyötä vapaasti verkossa, on parempi vaihtoehto.
• uskollisuus. No, kun valitset prototyyppityökalun, on myös tarpeen ottaa uskollisuus huomioon.
• integraatio. Toinen tekijä kannattaa harkita on nähdä, kuinka hyvin prototyyppien työkalu sopii suunnitteluprosessiin. Nykyään, jos käyttäjät joutuvat vaihtamaan työkaluja usein suunnittelun aikana, monet prototyyppityökalut on integroitu muihin työkaluihin, kuten Sketch, PS, Facebook, Slack ja paljon muuta.

kaiken kaikkiaan toivon, että nämä vinkit auttavat oikean työkalun valinnassa.

3 Best low Fidelity Prototyping Tools

Here are 3 best low fidelity prototyping tools for your references:

paperi ja kynät

nopeimmalla ja yksinkertaisella työkalulla kynät ja paperi auttavat piirtämään ideasi helposti ja nopeasti ja helpottavat myös sisäistä keskustelua joukkueen jäsenet. Vaikka joskus joudun käyttämään prototyyppiohjelmistoa piirtämiseen, käytän yleensä kyniä ja paperia selkeyttääkseni ideoitani ensin.

plussat:

• täysin vapaa
• nopea
• helppo aloittaa

miinukset:

• ei älykkäitä vuorovaikutuksia ja animaatioita
• et voi näyttää kaikkia ideoitasi selkeästi
• et voi keskustella ja testata jokaista yksityiskohtaa

Mockplus

Mockplus on tehokas low-fidelity prototyyppien työkalu, joka on saanut paljon huomiota viime vuosina. Sen avulla voit kääntää suunnitteluideoita interaktiivisiksi prototyypeiksi, testata, jakaa ja iteroida niitä helposti. Sen tiimiyhteistyö – ja johtamisominaisuus auttaa myös parantamaan työtehoasi vaivattomasti.

plussat:

• Tarjoa yli 200 valmiiksi rakennettua komponenttia ja 3000 valmiiksi suunniteltua kuvaketta
• luo vuorovaikutuksia yksinkertaisen vedä ja pudota
• tarjoa monia vaihtoehtoja viedä sivuja ja prototyyppejä
• tarjoavat lukuisia näytteitä ja projekteja
• tarjoavat monia tapoja jakaa ja testata prototyyppiä verkossa tai mobiilissa
• kommunikoida, kommentoida ja tehdä yhteistyötä prototyypin kanssa verkossa
• integrated with Sketch

cons:

• ei täysin ilmainen

Balsamiq mockups

Basamiq on yksinkertainen low-fidelity-prototyyppityökalu, jonka avulla voit piirtää suunnitteluideasi suoraan tussitaululle. Se on todella hyödyllistä, kun keskityt vain oman suunnittelun rakenteisiin ja kokonaiskonseptiin.

Cons:

• tarjoa sisäänrakennettu käsinmaalattu käyttöliittymäkirjasto
• vie mallit PNG / PDF-kuviin suoraan

miinukset:

• ei Perusvuorovaikutuksia prototyyppien suunnittelussa

2 Parhaat Hifi-Prototyyppityökalut

Marvel App

Marvel app on tehokas hifi-prototyyppityökalu, joka tukee lankakehysten, prototyyppien ja mallikuvien luomista yhteistyössä verkossa. Sen avulla voit suoraan ladata kuvia(mukaan lukien JPF, GIF ja PSD) ja lisätä animaatioita niitä luoda interaktiivisia prototyyppejä nopeasti.

Mockplus Cloud

Mockplus Cloud on ammattimainen Online-suunnittelun yhteistyötyökalu, jonka avulla tuotepäälliköt, suunnittelijat ja kehittäjät voivat työskennellä yhdessä verkossa automaattisten tietojen, resurssien ja koodinpätkien avulla.

sitä käytetään myös all-in-one-hifi-prototyyppityökaluna. Voit helposti ladata Sketch/PS/Adobe XD: stä malleja, joissa on resursseja ja spec-tietoja, ja lisätä runsaasti vuorovaikutuskomentoja vuorovaikutteisten ja hifi-prototyyppien luomiseksi.

tuoteryhmälle uuden prototyypin voi myös jakaa yhdellä linkillä ja saada palautetta reaaliajassa.

lyhyesti sanottuna, näinä päivinä, houkutella paljon enemmän käyttäjiä, monet prototyyppien työkaluja luodaan vastaamaan käyttäjien tarpeisiin mahdollisimman paljon. Low-fi-ja high-fi-prototyyppien välillä ei tunnu olevan selkeää rajaa.

joten oikean prototyyppityökalun valitsemiseksi sinun ja tiimisi on parasta ottaa testattavaksi useampia työkaluvaihtoehtoja.

Wrap Up

riippumatta siitä, mitä eroja low fidelity ja high fidelity prototyyppien ovat, miten ja miksi valitset low fidelity tai high fidelity prototyyppien paremman suunnittelun tai käyttäjätutkimuksen, hyvä prototyyppien työkalu, kuten helpompi ja nopeampi, Mockplus, usein merkitsee sinulle paljon luoda erinomainen web/sovellus kauniita käyttöliittymiä ja hyviä käyttäjäkokemuksia. Toivottavasti tämä artikkeli voi innostaa sinua muutenkin.

Voit myös tykätä:

mitä Prototyyppityökaluja tarvitset UX-suunnitteluun?

mitkä ovat prototyyppien edut? Miten hyödyntää sitä?

Prototyyppityökalujen Tiimiyhteistyö: Axure VS Mockplus

Wireframe vs Mockup vs prototyyppi & Prototyyppityökalujen valinta