Použiteľnosť pre figuríny. Časť 5: Ako pracovať s prototypmi a starať sa o záujmy mobilných užívateľov

Prečítajte si prvú časť článku.

Prečítajte si druhú časť článku.

Prečítajte si tretiu časť článku.

Prečítajte si štvrtú časť článku.

Ako dom začína projektom a nadáciou, využiteľné miesto začína optimálnym usporiadaním blokov a modulov. V tomto článku sa dozviete, ako zabezpečiť použiteľnosť stránky vo fáze tvorby prototypu a rozloženia. Nájdete tu aj niekoľko odporúčaní týkajúcich sa užívateľskej prívetivosti a užívateľskej prívetivosti mobilných zdrojov a aplikácií.

Prototyp a layout: čo je drôt a maketa

Prototyp alebo wireframe v dizajne webu je podobný architektonickému výkresu v stavebníctve. Vo fáze prototypov plánuje tvorca štruktúru stránky, navigáciu a spôsob, akým je obsah organizovaný. Prototyp nie je určený na posúdenie vizuálnej príťažlivosti lokality, takže beží v čiernej a bielej farbe.

Rozloženie alebo maketa je vytvorená na posúdenie vizuálnej príťažlivosti a funkčnosti lokality. Vo fáze prototypov sú do prototypu pridané farby, obrázky, grafika. Po dokončení práce s rozložením ho návrhár odošle na webový programátor, aby "oživil" alebo poskytol funkčnosť dizajnu.

Prototyping pomáha organizovať obsah a rozloženie poskytuje vizuálnu príťažlivosť stránok a jednoduchosť vnímania materiálov. Ak chcete vytvoriť použiteľnú stránku, začnite s prototypom a potom prejdite do rozloženia.

Čo potrebujete vedieť o modulárnej sieti 960 a 970

Použitie modulárnej mriežky na vytvorenie prototypov pomáha dizajnérovi organizovať obsah a zabezpečiť jednoduchosť jeho vnímania. Medzi dizajnérmi sú najobľúbenejšie 960G siete, ktoré sú určené na vytváranie stránok s veľkosťou 960 pixlov. Použitie modulových systémov s touto šírkou však vedie k problémom s použiteľnosťou, z ktorých hlavné sú uvedené nižšie:

  • Šírka medzier medzi stĺpcami je 20 pixelov. Je to príliš veľká vzdialenosť, čím sa vytvára viditeľný vizuálny priestor medzi stĺpcami a bráni používateľovi v skenovaní obsahu.
  • Pri použití modulárnej mriežky 960gs je šírka obsahu 940 pixelov. 10 pixelov "zjesť" polia vľavo a vpravo. Šírka obsahu 940 pixelov je pre moderné monitory s vysokým rozlíšením príliš malá.

Problém je riešený použitím modulárnej mriežky 970gs. Má tieto charakteristiky:

  • Obsah je usporiadaný v 12 stĺpcoch, ako v modulárnom systéme 960.
  • Šírka stĺpcov je 68 pixelov, čo je 8 pixlov viac ako 960gs.
  • Priestor medzi stĺpcami je 14 pixelov.

Použitie modulárnej mriežky 970gs je vhodnejšie z hľadiska použiteľnosti. Umožňuje kombinovať stránku v 2, 3, 4 alebo 6 moduloch.

Moduly úspešne štruktúrujú stránku bez vytvárania vizuálnych bariér.

Modulárna sieť 970 pixelov umožňuje použitie rôznych navigačných prvkov. Mriežka 970gs poskytuje dobré usporiadanie navigačných prvkov vzhľadom na obsah: obrázky a text. To poskytuje vizuálnu príťažlivosť a použiteľnosť.

Použitie modulárnej siete so šírkou 970 pixelov zabezpečuje dobrú organizáciu obsahu z hľadiska použiteľnosti. Táto modulárna mriežka zaručuje dizajnérovi väčšiu voľnosť pri navrhovaní prototypu.

Čo potrebujete vedieť o prototypoch s vysokým detailom

Prototypy sú kombinované do dvoch typov: nízky a vysoký detail. Prvými sú základné náčrty budúcej stránky, bez detailov. Tieto sa odlišujú prítomnosťou detailov. Sú čo najbližšie k rozloženiam, čo umožňuje zhodnotiť nielen štruktúru stránky, ale aj jej funkčnosť a vizuálnu príťažlivosť. Najmä vysoko detailné prototypy obsahujú prvky používateľského rozhrania, ktoré poskytujú použiteľnosť stránok.

Nasledujúce informácie vám pomôžu pracovať s podrobnými prototypmi a vytvárať použiteľné stránky:

  • Môžete rýchlo vytvoriť prototyp s vysokými detailmi. Použite na to knižnice rozhraní, napríklad Keynotopia.
  • Podrobné prototypy vám pomôžu vyhodnotiť funkčnosť použiteľnosti lokality už vo fáze prototypov. Tým sa zvyšuje efektivita projektanta a znižuje sa pravdepodobnosť, že dôjde k chybám, ktoré nepriaznivo ovplyvnia zážitok používateľa.
  • Veľmi podrobný prototyp je vhodný na použitie, ak vytvárate webovú stránku pre zákazníka, ktorý nemá odborné znalosti v oblasti web dizajnu. Bude pre vás jednoduchšie vyhnúť sa amatérskym požiadavkám "vložiť takéto tlačidlo sem, ale dvakrát znížiť tento formulár." Prirodzene, bude to mať pozitívny vplyv na použiteľnosť rozvinutej lokality.

Osobnosti používateľov pomôžu zabezpečiť použiteľnosť stránky

Obchodníci používajú nakupujúcich na vývoj produktov, vytváranie obsahu alebo plánovanie reklamných kampaní. Tento nástroj musia prijať dizajnéri. Použitie osoby vo fáze prototypovania a prototypovania zvyšuje použiteľnosť stránky. Toto môže byť ilustrované príkladom.

Predstavte si, že vaše stránky používajú dve hlavné skupiny zákazníkov, ktorí sú stelesnení v nasledujúcich marketingových osobách:

  • Stredný manažér Igor, ktorý má 24 rokov. Nepodieľa sa na prístrojoch nepretržite.
  • Dôchodca Sergej Borisovič, ktorý má 76 rokov. Nie je veľmi dobrý v používaní počítača a tiež trávi veľa času hľadaním potrebných častí stránky, produktov a služieb.

Súhlasíte s tým, že rozhranie vytvorené pre Igora bude mať vo väčšine prípadov nízku použiteľnosť z pohľadu Sergeja Borisoviča? Ak chcete, aby bola stránka použiteľná pre všetky skupiny klientov, musíte ich segmentovať pomocou marketingových ľudí a pokúsiť sa pri vytváraní prototypov a rozložení zohľadniť potreby každej skupiny.

Čo by mala byť virtuálna klávesnica pre mobilné stránky formulárov a aplikácií

Vyplnením formulárov na mobilných verziách stránok sa používatelia stretávajú s potrebou zadávať text, čísla a e-mailové adresy. Toto sa musí zohľadniť pri vytváraní virtuálnej klávesnice.

Prakticky každý formulár má pole pre e-mail. Pre toto pole musíte použiť zadanú klávesnicu na zadávanie e-mailových adries. Vyznačuje sa prítomnosťou na prvej obrazovke znaku @ a bodu.

Pre pole alebo adresu URL webovej adresy sa prispôsobenie klávesnice skladá z pridania bodu, lomky a tlačidla „.com“. Toto tlačidlo môže prepnúť na ".net", ".ru" a tak ďalej. Okrem toho, klávesnica na zadanie adresy URL je vhodnejšie na odstránenie miesta.

Pre polia, ktoré obsahujú zadávanie čísel, je lepšie zobraziť numerickú klávesnicu na prvej obrazovke.

V poli „Telefónne číslo“ môžete používateľom ponúknuť klávesnicu v štýle vytáčania na smartfóne.

Použite skeuomorphism len na zvýšenie funkčnosti.

Návrhári často používajú skevomorphism, aby prvky mobilných aplikácií alebo lokalít vyzerali ako objekty v reálnom svete. Vo väčšine prípadov to nemá vplyv na funkčnosť a použiteľnosť. Napríklad používateľ s rovnakým úspechom použije skeuomorphic a "flat" kalkulačku.

Skeuomorphic design je užitočný, keď sa rozhranie stane jasnejším. Na nasledujúcom obrázku je napríklad zobrazené rozhranie pre čítanie elektronických kníh. Vďaka skeuomorphism, užívateľ intuitívne chápe, ako otočiť stránky.

Ako urobiť načítanie čakanie menej bolestivé

Nikto nechce čakať. Najviac zo všetkého nechcú čakať na užívateľov mobilných prístrojov, zvyknutí robiť všetko na úteku. Nasledujúce triky spôsobia, že budú čakať, keď sťahovanie aplikácií alebo obsahu bude menej bolestivé:

  • Použite indikátor procesu. Keď užívateľ vidí, že čakanie nie je dlhé, je nepravdepodobné, že opustí vaše stránky alebo aplikácie.
  • Vezmite používateľa ďalej od čakania. Požiadajte ho, aby pri načítavaní obsahu alebo aplikácie niečo urobil. Tento princíp je implementovaný v aplikácii Instagram. Počas odovzdávania fotografie má používateľ možnosť pridať názov fotografie, krátky popis a značky.
Rýchlosť sťahovania aplikácie je len jedným z jej faktorov úspechu. Propagácia mobilných aplikácií, ako aj webových stránok je nevyhnutná v komplexe, preto odporúčame dávať prácu na propagáciu profesionálom.

Začiatok použiteľnosti stránok ...

... z vytvorenia zrozumiteľnej a ľahko pochopiteľnej štruktúry stránok. Tento problém sa rieši vo fáze prototypov. Na vytvorenie prototypov použite modulárnu šírku siete 970 pixelov. Použite knižnice rozhrania na rýchle vytvorenie vysoko podrobných prototypov. Použite rozloženia na meranie vizuálnej príťažlivosti a funkčnosti stránky. Vytvorte si vlastné osoby, aby ste vyvinuli rozhrania prispôsobené potrebám hlavných skupín návštevníkov stránok.

Pri práci s mobilnými zdrojmi a aplikáciami nezabudnite vytvoriť vhodné formuláre. Prispôsobte virtuálnu klávesnicu konkrétnym poliam formulára. Použite skevomorphism na zlepšenie funkčnosti zdroja. Odviesť užívateľov od čakania na procesné indikátory alebo ďalšie akcie.

Loading...

Zanechajte Svoj Komentár