Kuinka suunnitella käyttäjäystävällisiä mobiililiitäntöjä

Sep 11, 2025
Miten tehdään

Jotkut mobiilimallit kärsivät ongelmasta: ne saattavat näyttää hyvältä pinnalla, mutta alkaa käyttää niitä ja pian huomaat, että liian tärkeä tekijä on laiminlyöty: Ergonomia. Haila taidetta luoda malleja, jotka sopivat ihmiskehon (pikemminkin kuin toisinpäin), on yksi suunnittelumaailman todellisista epämiellyttävistä sankareista.

Ergonomia on aina ollut erittäin tärkeää teollisuussuunnittelijoille, mutta se on yhä tärkeämpi digitaalisille suunnittelijoille. Miksi? Koska älypuhelimet ja tabletit muuttuvat tapaan, jolla voimme olla vuorovaikutuksessa digitaalisten mallien kanssa. Emme enää käytä hankalaa näppäimistöä ja hiirtä kertomaan digitaalisille ystävillemme, mitä tehdä. Nyt se on enemmän suoraa, fyysistä. Pidämme laitteitamme. Napaimme niitä. Me hyppäämme ne. Me rakastamme heitä.

Tämä yhä fyysinen joukkovelkakirjalaina, jossa on rakkaat mobiililaitteet, pakottaa suunnittelijat, jotka eivät ainoastaan ​​ajattele, miten muotoilu näyttää ja tuntee myös sen käyttämisen fyysiset näkökohdat. Se pakottaa suunnittelijat ajatella, miten käyttäjät pitävät ja vuorovaikutuksessa älypuhelinten ja tablettien kanssa; Kuinka paljon näytöstä ne voivat mukavasti päästä ja miten muotoilu tuntuu kädessä. Se pakottaa suunnittelijoita miettimään mobiilisuunnittelun ergonomiaa.

Joten miten menet luomaan mobiilisuunnittelun, joka on ergonominen ja siksi mukava käyttää?

01. Poistu toimistosta

Jopa ennen kuin aloitat ajattelua mahdollisista malleista, pääset ulos toimistosta suorittamaan joitain ensisijaisia ​​havaintoja. Vietä aamulla tai iltapäivällä, jossa tarkastellaan, missä, milloin ja miksi ihmiset käyttävät mobiililaitteita.

Tee muistiinpano siitä, miten ihmiset pitävät ja vuorovaikutuksessa heidän laitteensa kanssa, mitä he voivat tehdä tuolloin ja tällaiset haasteet ja häiriötekijät, joita he saattavat joutua väittämään. Nämä tiedot auttavat ilmoittamaan suunnittelun ergonomiaa ja tarkoittaa, että kun kyseessä on testata suunnittelua, voit testata skenaarioita, jotka tiedät todella tapahtuvan todellisessa maailmassa.

02. Suunnittelu useille pitille

The three main holds used for a smartphone, and the frequency which they’re typically used

Älypuhelimeen käytettävät kolme pääkytkintä ja niiden tyypillisesti käytetty taajuus

Jos havaitset ihmisiä, jotka käyttävät mobiililaitteita, näet pian, että he käyttävät a erilaisia ​​eri pitteitä . Käytetyt pitoisuudet ja taajuus, jolla käyttäjät muuttavat pitoisuutensa, on tärkeää suunnitella useilla varustetuilla mielessä.

Aloita esimerkiksi älypuhelimen suunnittelu yhdellä kädellä (koska se on haastavin), mutta aina testata malleja eri puolilla sitä, kuinka miellyttävää niistä on.

03. Aseta suosittuja ohjaimia REACHissa

Green areas are easy to reach, amber takes more effort and red areas are hard to reach

Vihreät alueet ovat helposti saavutettavissa, Amber vie enemmän vaivaa ja punaiset alueet ovat vaikeita

Aseta usein käytetyt kontrollit, kuten painikkeet ja linkit, joissa ne pääsevät helposti sormilla tai peukaloilla. Näytön keski- ja alaosa ovat hyvät alueet, vaikka pohjat kulmat voivat olla hankalia napauttamaan, kun laitetta pidetään vain yhdessä kädessä (lue lisää tässä ).

Se on edelleen yleissopimus sijoittaa valikkoja näytön yläosassa. Tämä voi kuitenkin olla vaikea kohdealue, joten on hyvä idea tukea myös pyyhkäisytoimintoa valikkoon.

04. Aseta sisällön hallinnan yläpuolelle

The BBC iPlayer iPad app places controls in easy to reach areas and below content

BBC iPlayer iPad -sovellus asettaa ohjaimet helposti saavuttamaan alueet ja sisällön alapuolella

Et halua jonkun sormen tai peukalon peittämistä sisällön peittämiseksi, kun ne napauttavat näyttöä, joten aseta sisällön hallinnan yläpuolelle. Varmista myös, että tärkeimmät tiedot eivät ole näytön alueella, jossa se voidaan helposti peittää sormella tai peukaloilla - kuten pohjakulmat, jotka usein peitetään, kun älypuhelin pidetään yhdessä kädessä.

05. Suunnittelu muotokuvaustilassa mielessä

Vaikka käytetty pituus voi muuttua, yksi asia, joka on paljon johdonmukaisempi sekä älypuhelimille että tableteille, on ihmisten taipumus pitää ne pystysuoraan suurimman osan ajasta. Horisontaalista pitoa käytetään usein tiettyihin tehtäviin, kuten videoiden tai valokuvien katseluun, mutta tämä on poikkeus, ei normi.

Tietenkin mobiilisuunnittelun tulisi mieluiten tukea sekä muotokuva (pystysuora) että maisema (horisontaaliset) tilat, mutta ellet suunnittele videota tai valokuvan raskasta sivustoa tai sovellusta, suunnitella muotokuvaustila mielessä.

06. Suunnittelu peukaloille

The Spotify app is designed to be thumb-friendly, with large tap targets

Spotify-sovellus on suunniteltu olemaan peukaloystävällinen, suurten napauskohteiden avulla

Thumbs ajaa suurimman osan kaikista älypuhelinten vuorovaikutuksista. Tämä johtuu siitä, että peukalot käytetään yksinomaan, kun matkaviestin pidetään toisessa kädessä ja jota käytetään voimakkaasti, kun sitä pidetään kahdessa kädessä.

Peukalot ovat hieman suurempia kuin sormet, ja siksi tarvitsevat suuremman hand-tavoitteen. Yritä tehdä nämä napauta koskevat tavoitteet vähintään 44 x 44 pistettä (16 x 16 mm), vähintään 7 pistettä (2,5 mm) niiden välillä. Suuremmat napauskohteet ovat aina parempia ja sinun ei pidä olla pienempiä kuin 44 x 30 pistettä (16 x 11 mm).

Vaikka olet suunnitellut tabletteja, vielä suunnittelu peukaloille, koska suunnittelun pitäisi tukea vähiten tarkkaa kosketusmenetelmää, jota se kohdata. Suuri hanan kohde ei ole vain hyvä peukaloille, se on hienoa sormille.

07. Suunnittelu suurille eleille

Joten suuremmat napauta tavoitteet ovat parempia. Mikä suurempi kosketuskohde on olemassa kuin koko näytöllä? Yritä suunnitella suuria eleitä mielessä, kuten mahdollistavat käyttäjien pyyhkäisemisen siirtyä eteenpäin tai taaksepäin valokuvagalleriassa tai tuoda valikko.

Muista, että käyttäjät eivät ehkä ymmärrä eleitä tuetaan, joten on aina hyvä tarjota toissijainen tapa tehdä jotain, kuten nuolikuvakkeen napauttamiseksi seuraavassa kuvassa.

08. Nouse haasteeseen

Ergonomiassa joskus kuulet puhumaan suunnitellusta vähintään 95 prosentin käyttäjistä luomalla suunnittelun, joka on mukava 2.5.5.5.5.5.5.5.-prosenttiyksikköä. On aina äärimmäisiä käyttäjiä, jotka ovat erittäin vaikeita majoittaa - kuten me kaikki tiedämme, ettet voi miellyttää kaikkia koko ajan, mutta jos voit luoda suunnittelun, jota haastavat käyttäjät voivat käyttää mukavuutta, sen pitäisi myös toimia kaikille ne.

Siksi on hyvä idea suunnitella haastavien käyttäjien ja skenaarioiden mielessä. Ajattele esimerkiksi kiireistä lähiliikennettä, joka kävelee kadulla kahvin yhdellä kädellä ja matkapuhelimella toisessa, tai joku niveltulehdus.

09. Pidä vuorovaikutukset minimiin

Tiedätkö, mitkä mukavin mobiililaitteen vuorovaikutus on? Se ei ole hanan tai pyyhkäisy tai lehdistö. Se ei ole lainkaan vuorovaikutusta. Vähemmän vuorovaikutus Mobile Design vaatii, sitä vähemmän sinun täytyy huolehtia ergonomiasta. Yritän aina pitää vuorovaikutuksen minimiin. Ruthlessly leikataan matkaviestimuotoja, käyttää autosuggestistä ja rajoittaa ilmoituksia vain asioihin, joita käyttäjä todella on ilmoitettava.

10. Prototyyppi mallit

Et yksinkertaisesti voi arvioida matkaviestinnän ergonomiaa, ennen kuin voit pitää sitä fyysisesti kädet ja kokeilla eri kahvoja. Siksi en prototyyppi suunnittelu mahdollisimman pian. Me pidämme Akseli , mutta on paljon muita Suuret prototyyppiset työkalut .

Nopea kokeiluversio voi jopa käyttää peruskäyttäjän testejä yksinkertaisten paperiprototyyppien avulla. Mobiililaitteelle juuttunut luonnos- tai paperitulostus kertoo sinulle yllättävän määrän ergonomiasta.

11. Testaa, testata ja testaa sitten lisää

Haluatko tietää yhden taatun tavan luoda ergonomiset matkaviestinnit? Se on testata malleja, imeä ja testata, italeroida ja testata ... ja jatka kunnes sinulla on joukko eri ihmisiä, joka kattaa joukko eri laitteita, kaikki raportoivat, että muotoilu on mukava käyttää. Se on niin yksinkertainen.

Mobiililaitteita on luonnollisesti suunniteltu "mobiiliksi", joten päästä toimistosta testaamaan malleja ympäristöissä ja tilanteissa, joita heillä on todennäköisesti käytössä. Kahvilat ovat aina hyvä paikka testata. Testausmallit Monet mahdollisimman ihmiset (vähintään viisi tai kuusi) ja keskittyvät haastaviin skenaarioihin, kuten älypuhelimen yhdellä kädellä. Jos muotoilu toimii hyvin, kun käyttäjän vuorovaikutukset ovat rajattuja, se varmasti ylittää loput. Se on ensisijaisesti jatkuvasti testaus ja iterointi, että voit luoda todella ergonomiset matkaviestin.

Tämä artikkeli ilmestyi alun perin nettolehdestä. Tilaa täältä.

Aiheeseen liittyvät artikkelit:

  • 16 UX / UI Instagram -tilit Sinun täytyy seurata
  • 20 parasta Wireframe-työkalua
  • 5 suurinta UX-suunnittelun suuntausta 2018

Miten tehdään - Suosituimmat artikkelit

CINEMA 4D TUTORIALS: 13 parasta

Miten tehdään Sep 11, 2025

Cinema 4D Tutorials: Pikayhteydet Kynsien perusasiat Mennä kauemmas Nämä elokuvateatterien 4D-opetusohjelmat a..


Rakenna ääniohjattu UI

Miten tehdään Sep 11, 2025

Olemme nähneet monia uusia sovellusliittymiä verkkoon viime vuosina, jotka ovat todella mahdollistaneet Web-sisällön, jotta samanlaiset toiminnot ovat jonkin aikaa. Suhteellisen uusi API ..


Valaise 3D-työsi kupolin valoilla

Miten tehdään Sep 11, 2025

Dome-valon käyttö on ollut yksi CGI-luomisen suurimmista edistymisestä viimeisen vuosikymmenen aikana. Uiminen kohtaus jokaise..


Suunnittele reagoiva sivusto EM-pohjaisella mitoituksella

Miten tehdään Sep 11, 2025

Olet luultavasti kuullut, että sinun pitäisi käyttää suhteellisia yksiköitä fonttikokoon. Tämä on hyvä sääntö helposti web-suunnittelulle; Jos käyttäjä muuttaa selaimen oletus..


Luo portaalin vaikutus Maya

Miten tehdään Sep 11, 2025

Tämä portaali vaikutus Dr Strange oli hyvin erikoinen. Se oli melko paljon ainoa vaikutus elokuvaan, joka ei nojata enemmän li..


Rakenna verkkokauppasivusto tyhjästä

Miten tehdään Sep 11, 2025

Ecommerce on tullut niin suosittu viime vuosina, nyt on vaikea kuvitella tulevaisuutta ilman sitä. Internetin voima on tehnyt yh..


Käytä hiukkasia 3D-splash

Miten tehdään Sep 11, 2025

Tämä opetusohjelma tarkastelee, miten voit tehdä nestemäisen roiskeen tai kruununvaikutuksen, ja sitä voidaan käyttää roi..


Tutki luovaa koodia P5.JS: llä

Miten tehdään Sep 11, 2025

Viettää päivä Brendan Dawes at Luo Lontoo ja löyd..


Luokat