Mobiilisovellusten ymmärtäminen Mobile App Designissa

Käytettävyys on yksi avaintekijöistä mobiili käyttöliittymän suunnittelu. Suuri käytettävyys liittyy usein microinteractions mitkä ovat pieniä vastauksia ja käyttäytymistä käyttöliittymästä sanella, miten käyttöliittymää tulisi käyttää. Nämä mikrointeraktiot määrittelevät käyttäytymistä, kannustavat sitoutumista ja auttavat käyttäjiä visualisoimaan, miten rajapinnan pitäisi toimia.

Digitaaliset liitännät ovat välittäjät käyttäjien välillä ja niiden halutut tavoitteet. Interface-suunnittelijat luovat kokemuksia, jotka auttavat käyttäjiä suorittaa tiettyjä tehtäviä. Esimerkiksi listan sovelluksessa on käyttöliittymä, joka auttaa käyttäjiä järjestämään tehtävänsä. Aivan kuten Facebook-sovellus antaa käyttäjille rajapinnan vuorovaikutuksessa Facebook-tilin kanssa.

Tässä oppaassa kaivaan eteenpäin mobiilisovellusten mikrointeraktiot. Pienet vuorovaikutukset voivat tuntua triviaaleilta, mutta niillä voi olla valtava vaikutus käyttäjän kokemuksen laadusta. Kun mikro-vuorovaikutus tehdään oikein, se tuntuu olevan todellinen osa yleistä mobiilikäyttäjäkokemusta.

Mikrointeraktioiden voima

Useimmissa tapauksissa mikro-vuorovaikutuksen tavoite on antaa palautetta käyttäjän toiminnan perusteella. Tämä voi auttaa käyttäjiä visualisoi, miten käyttöliittymä liikkuu tai käyttäytyy, vaikka se on puhtaasti digitaalinen litteässä näytössä.

Mikrointeraktioilla on valtaa, koska ne luoda harhaanjohtava kokemus. On / off-liukusäätimet eivät oikeastaan ​​liiku kuin fyysiset kytkimet, mutta ne voivat näyttää liikkuvan tällä tavalla animaatioiden kautta.

Löysin tämän artikkelin uskomattoman lainauksen, jossa keskusteltiin mobiilisovellusten mikro-vuorovaikutusten valtavasta arvosta:

“Parhaat tuotteet tekevät kaksi hyvää: ominaisuudet ja yksityiskohdat. Ominaisuudet ovat se, mikä vetää ihmisiä tuotteeseesi. Yksityiskohdat pitävät ne siellä. Ja yksityiskohdat ovat sitä, mikä tekee sovelluksestamme erottuvan kilpailustamme.”

pieniä yksityiskohtia saattaa tuntua merkityksettömältä kehitysnäkökulmasta, mutta käyttäjäkokemuksen näkökulmasta ne todella ovat tee ero OK-sovelluksen käyttöliittymän ja poikkeuksellisen sovellusliittymän välillä.

Suuret mikrointeraktiot tekevät käyttäjän tuntuu palkitsevalta toimesta. Nämä toimet voivat olla toistettu ja käyttäjän käyttäytymiseen. He voivat oppia käyttämään sovellusta, joka perustuu näihin pienempiin mikrointeraktioihin. Kun käyttäjä suorittaa käyttäytymisen, nämä pienet vuorovaikutukset merkitsevät "kyllä, voit olla vuorovaikutuksessa kanssani!"

Tutustu esimerkkeihin, jotka löytyvät Googlen materiaalien suunnittelussa. Asiakirjoissa on todellinen kokonaisuus, joka on omistettu aineelliselle liikkeelle. Paikkasuhteet ovat suuri osa tätä yhtälöä, mutta liike voi sanella enemmän kuin pelkästään avaruussuhteet.

Tässä ovat animaation ja liikkeen yleisimmät käyttötavat mobiililaitteessa UI / UX:

• Käyttäjien ohjaaminen eri sivujen välillä
• Ohjaa käyttäjiä käyttöliittymän kautta opettamaan tiettyjä käyttäytymismalleja
• Ehdotetaan toimia / käyttäytymismalleja, jotka voidaan tehdä millä tahansa tietyllä sivulla

Mobiilisovelluksilla on paljon vähemmän näytön tilaa kuin sivustot. Tämä voi johtaa vaikeuksiin opettaa käyttäjille sovelluksen käyttöä. Mutta se voi olla yllättävän yksinkertaista, jos tiedät, miten mikrointeraktiot toteutetaan oikein.

Miten Microinteractions toimii

Yksittäinen mikrointeraktio palaa aina, kun käyttäjä ottaa osaa yhteen rajapinnan osaan. Useimmat mikrointeraktiot ovat animoidut vastaukset käyttäjän eleeseen. Niinpä pyyhkäisevä liike reagoi eri tavalla kuin hanan tai flickin.

Blink UX teki suuren postin keskustellakseen mikrointeraktioiden pienistä yksityiskohdista. Näiden pienten animaatioiden pitäisi seurata a ennakoitavissa oleva prosessi että käyttäjä voi oppia jokaisesta sovelluksen vuorovaikutuksesta.

Microinteractions ohjaa käyttäjiä käyttöliittymän kautta tarjoamalla vastauksia käyttäytymiseen. Kun käyttäjä tietää, että päälle / pois-liukusäädin voi liikkua, he tietävät, että se on vuorovaikutteinen. Vastauksen perusteella he tietävät myös, onko asetus päällä vai pois. Kun painike näyttää napsauttamalla käyttäjää vaistomaisesti tietää he voivat vuorovaikutuksessa sen kanssa.

UXPinin mukaan jokainen perusmikroaktiivisuus voi hajota neljään vaiheeseen, mutta olen tiivistänyt prosessin kolme vaihetta.

1. Toiminta - käyttäjä tekee jotain kuten flick, pyyhkäise, napauta ja pidä tai jotakin muuta vuorovaikutusta.
2. reaktio - käyttöliittymä vastaa perustuu siihen, mitä on tapahduttava. Näytön pyyhkäisy saattaa mennä takaisin selaimen historiaan tai napauttamalla ON / OFF-liukusäädintä voi sammuttaa asetus.
3. palaute - tämä on mitä käyttäjä todella näkee vuorovaikutuksen tuloksena. Kun käyttäjä pyyhkäisee takaisin mobiiliselaimessa, se saattaa kellua edellisen sivun yläpuolella ja näyttää näytön yläosassa. On / off-liukusäädin voi liukua sujuvasti tai kasvaa suuremmaksi, kun näyttöön kohdistuu paine.

Nämä hyvin pienet toimet voidaan toteuttaa ilman animaatiota, mutta suuret mikrointeraktiot tarjoavat a realistinen tunne tasaiselle digitaaliselle rajapinnalle, joka on pääosin muodossa realistiset animaatiovaikutukset. Nämä hengittävät käyttöliittymän ja kannustavat enemmän käyttäjän vuorovaikutusta.

Etsi tiedot

Tarkastellessasi pienempiä malleja, ymmärrät, miten sovelluksen pitäisi vastata tiettyyn käyttäytymiseen.

Päivitä vetämällä on hyvä esimerkki nykyaikaisesta mikrointeraktiosta. Se ei ollut olennainen osa iOS: a, kun se käynnistettiin ensimmäisen kerran, mutta monet sovellukset ottivat tämän ajatuksen käyttöön ja alkoivat liikkua sen kanssa. Nyt vedä päivittäminen on hyvin tunnettu käyttäytyminen, jota useimmat käyttäjät tietävät käyttävänsä syötteen käyttöliittymän selaamisessa. Sama voidaan sanoa myös liikkuvista hampurilaisvalikoista, jotka ovat kasvaneet hurjasti suosittuina.

Tee jokainen mikrointeraktio realistinen ja yksinkertainen. Älä liioi animaatioita, koska ne voivat tulee tylsiä jos he ovat liian yksityiskohtaisia ​​ja käyttävät niitä usein. Käyttäjä ei halua, että kipinä ilmestyy aina, kun ne napauttavat valikkokuvaketta. Löydä tasapaino todellinen arvo, joka kommunikoi miten käyttöliittymä toimii menemättä yli laidan.

Tarkastellaan joitakin esimerkkejä

Mielestäni paras tapa oppia jotain on tehdä se, ja toinen paras tapa on tutkia muiden työtä. Olen kerännyt pienen kourallisen UI / UX-mikrointeraktio-animaatiot lahjakkailta Dribbble-käyttäjiltä voit näyttää, miten nämä näyttävät todellisesta makuista.

Jokainen sovellus on erilainen ja sillä on erilaiset tarpeet sen mukaan, mitä sovellus tekee. Loppujen lopuksi useimmat käyttäjät haluavat samaa: sovellus intuitiivinen ja tarjoaa laadukkaan käyttäjäkokemuksen mikrointeraktiot suhteessa käyttäjän käyttäytymiseen.

1. Animoitu tapahtuman sovellusliittymä

Ensimmäinen esimerkki on Ivan Martynenkon luoma hieno kortti-animaatio. Huomaa kourallinen mikrointeraktioita tässä suunnittelussa, erityisesti korttien pyyhkäisy ja yksityiskohtien siirtäminen.

Kun napautat korttia, se kasvaa. Ja napauttamalla Tilaa-painiketta käyttäjäprofiilikuvaukset tilaajaluetteloon. Kaikki tuntuu erittäin intuitiiviselta ja melko luonnolliselta käyttöliittymälle.

2. Interaktiivinen harjoitusnäyttö

Tämä luova mobiiliharjoituksen animaatio tulee suunnittelija Vitaly Rubtsovilta. Se demoi käyttäjän tallentamaan harjoituksensa yhdelle kyykkyryhmälle.

Huomaa, että jokaisella animaatiolla on sama joustava pomppivaikutus kun valikot avautuvat ja suljetaan. Tämä pätee myös silloin, kun toiminto on valittu nimellä "Valmis". johdonmukaisuus on avain mikrointeraktioilla, koska heidän kaikkien pitäisi tuntea kytketty samaan liitäntään.

3. Hae sovelluksen mikrointeraktioita

Lyhyt, makea ja piste. Luulen, että tämä kuvaa parhaiten Lukas Horakin suunnittelemia hakusovellusmikroaktiviteetteja. Jokainen animaatio on nopea, mutta silti havaittavissa.

Näin suunnittelet mikrointeraktioita välttää liikaa monimutkaisuutta. Jos käyttöliittymä latautuu nopeammin ilman animaatiota, miksi vaivaa lisätä sitä? Nopeat animaatiot pidä käyttäjä liikkumatta ilman, että koet kokemusta.

4. Fitness Goal Microinteraction

Mielestäni Jakub Antalâ? Näillä kaikilla on tämä tunne jiggly jell-o: sta, koska muodot liikkuvat niin sujuvasti.

Liitäntä tuntuu kuitenkin kiinteä ja käyttökelpoinen. Se osoittaa, että tarkoituksella muotoillut mikrointeraktiot voivat silti olla hauskoja ja viihdyttäviä, mutta myös toiminnallisia ja käytännöllisiä.

5. Vedä Päivitä animaatio

Tässä on yksi minun ehdottomista suosikkini-virkistävästä animaatiosta, jonka ryhmä on luonut Ramotionissa. Tämä ei vain jäljittelee nestettä veto-toiminnolla, mutta vastauksen animaatiolla yhdistää sujuvasti nesteen roiskeesta lastauspiiriin.

Tämä paljon huomiota yksityiskohtiin on se, mikä tuo esiin todellisen kauneuden mobiilisovellusten mikrointeraktioissa.

6. Välilehti Microinteraction

Ohjatut widgetit ovat melko yleisiä mobiilisovelluksissa pienempien näyttöjen vuoksi. Pidän todella John Noussisin luomasta mikrointeraktiosta, vaikka mielestäni se olisi tehokkaampaa nopeammin, mutta itse animaatio on loistava ja harkittu.

Tab-ankkurinuoli liukuu oikealle aivan kuten uusi sisältö kääntyy oikealta. Se antaa illuusion koko näyttö fyysisesti liikkuu oikealle. Animaatio on hieno, mutta koska se on niin hidasta, useimmat käyttäjät saisivat harmittaa muutaman päivän kuluttua.

7. Animaation esilataus

En ole sanonut paljon lataa baareja tässä viestissä, mutta ne ovat yhtä arvokkaita kokonaiskokemukselle. Useimmat käyttäjät eivät halua odottaa tietoja latautumiseen, mutta he eivät todellakaan halua tuijottaa tyhjää näyttöä, kun se latautuu.

Bret Kurtz teki tämän hämmästyttävän esilatausnäytön, joka on sekä hauskaa että informatiivista. Käyttäjä voi itse olla viihdyttivät katsomassa tätä pienen animaation toistoa. Ne voivat myös olla vakuutti että sovellus on vielä ladata tietojaan ja ei ole kaatunut.

Käärimistä

Kaikki nämä esimerkit osoittavat loistavasti mikrointeraktioiden arvoa. Mobiilisovellukset saavat paljon enemmän hyötyä mikrointeraktioista, koska käyttäjät kosketa näyttöjä fyysisesti sormillaan. Käyttäjät eivät napauta työpöydän näyttöjä tai niiden kannettavia näyttöjä, mutta kaikki napauttavat älypuhelimiaan, koska ne ovat oletusarvoinen interaktiivisuus.

Se on a paljon enemmän henkilökohtaista kokemusta, Tämän vuoksi mobiilisovellusten suunnittelu voi olla a hienostunut prosessi. Kun suoritetaan oikein, suurten mobiilien mikrointeraktioiden lisääminen voi rakentaa a voimakas illusorinen käyttäjäkokemus vain pikseleistä ja liikkeistä.