{"id":3712,"date":"2015-11-20T09:58:05","date_gmt":"2015-11-20T08:58:05","guid":{"rendered":"http:\/\/www.usability-lab.pl\/?p=3712"},"modified":"2020-10-20T11:30:24","modified_gmt":"2020-10-20T09:30:24","slug":"jak-tworzyc-atrakcyjne-ui-przypominamy-zasady-cz-1","status":"publish","type":"post","link":"https:\/\/www.usability-lab.pl\/pl\/jak-tworzyc-atrakcyjne-ui-przypominamy-zasady-cz-1\/","title":{"rendered":"Jak tworzy\u0107 atrakcyjne UI? Przypominamy zasady cz.1"},"content":{"rendered":"

Prawo Hicka m\u00f3wi, \u017ce im wi\u0119cej mamy mo\u017cliwo\u015bci podczas pracy nad zadaniem, tym wi\u0119cej czasu zajmie nam jego realizacja. Dlatego tworz\u0105c u\u017cyteczne interfejsy, pami\u0119tajmy, \u017ce u\u017cytkownik powinien czu\u0107 si\u0119 na naszej stronie swobodnie i mie\u0107 wyb\u00f3r, ale\u2026 nie za du\u017cy ;).<\/p>\n

\"Jak<\/p>\n

Nie za\u015bmiecajmy interfejsu zbyt du\u017c\u0105 ilo\u015bci\u0105 element\u00f3w, kt\u00f3re rozpraszaj\u0105 uwag\u0119 i wprowadzaj\u0105 w\u015br\u00f3d u\u017cytkownik\u00f3w poczucie zagubienia. Ludzie, owszem, chc\u0105 wybiera\u0107, ale przecie\u017c nie z 1000 opcji jednocze\u015bnie.<\/p>\n

Dobry przyk\u0142ad user interface: strona amazon.com<\/h2>\n

\u017beby projektowa\u0107 dobre interfejsy, warto wiedzie\u0107, jak wygl\u0105daj\u0105 te wzorcowe. Strona g\u0142\u00f3wna Amazona ma tylko kilka przycisk\u00f3w nawigacyjnych. Reszt\u0119 ekranu wype\u0142niaj\u0105 atrakcyjne zdj\u0119cia, kt\u00f3re prezentuj\u0105 dost\u0119pne produkty i zach\u0119caj\u0105 do klikni\u0119cia \u201eQuick look\u201d.
\nMenu z dost\u0119pnymi kategoriami jest ukryte. Widzimy je dopiero po najechaniu kursorem w odpowiedni\u0105 kategori\u0119. Gdyby projektanci odpowiedzialni za architektur\u0119 informacji na witrynie zdecydowali si\u0119 od razu zaprezentowa\u0107 ca\u0142\u0105 list\u0119 dost\u0119pnych kategorii, mogliby\u015bmy poczu\u0107 si\u0119 przygnieceni nadmiern\u0105 ilo\u015bci\u0105 informacji, a sama witryna wyda\u0142aby nam si\u0119 przeci\u0105\u017cona contentem.<\/p>\n

Ukrycie opcji \u2013 dop\u00f3ki sami nie zechcemy ich wybra\u0107 \u2013 sprawia, \u017ce strona, opr\u00f3cz tego, \u017ce jest bardziej przyjazna dla u\u017cytkownika, jest te\u017c po prostu bardziej atrakcyjna wizualnie.<\/p>\n

Oznaczaj wa\u017cne elementy na stronie<\/h2>\n

U\u017cytkownik musi wiedzie\u0107, jaka jest funkcja i cel istnienia poszczeg\u00f3lnych element\u00f3w na stronie. Projektant interfejsu, wsp\u00f3\u0142pracuj\u0105cy z web designerem, musi zatem tak je oznakowa\u0107, \u017ceby nie wzbudza\u0142y \u017cadnych w\u0105tpliwo\u015bci. Kto\u015b, kto porusza si\u0119 po witrynie, musi to robi\u0107 intuicyjnie. Dlatego przyj\u0119\u0142o si\u0119, \u017ce mamy np. sta\u0142y wz\u00f3r znakowania niekt\u00f3rych ikon. Przyzwyczaili\u015bmy si\u0119, \u017ce lupa oznacza \u201eposzukiwanie\u201d i dlatego znajduje si\u0119 przy polu umo\u017cliwiaj\u0105cym wyszukiwanie.<\/p>\n

\"Jak<\/a>
\nNatasha Postolovski ze Smashing Magazine wyr\u00f3\u017cnia pi\u0119\u0107 rodzaj\u00f3w takich znacznik\u00f3w:<\/p>\n

    \n
  1. Jawne \u2013 s\u0142owa lub obrazy s\u0105 oczywiste, sugeruj\u0105, co nale\u017cy zrobi\u0107 (to przyciski call to action, czyli zach\u0119caj\u0105ce do dzia\u0142ania).<\/li>\n
  2. Wzory (pattern) \u2013 ich znaczenie jest powszechnie znane i u\u017cywane przez wszystkich. Je\u015bli widzimy ikonk\u0119 tr\u00f3jk\u0105ta obr\u00f3conego w praw\u0105 stron\u0119, wiemy, \u017ce mamy do czynienia z materia\u0142em wideo, kt\u00f3ry mo\u017cemy odtwarza\u0107.<\/li>\n
  3. Ukryte \u2013 wiemy, \u017ce mo\u017cemy wej\u015b\u0107 z nimi w interakcj\u0119, ale dopiero w okre\u015blonym momencie. Pojawiaj\u0105 si\u0119 w widoku strony, kiedy np. mo\u017cemy pobra\u0107 jaki\u015b element ze strony albo widzimy symbol akt\u00f3wki \u2013 czyli plik\u00f3w.<\/li>\n
  4. Metaforyczne \u2013 cz\u0119sto po\u0142\u0105czone z innymi rodzajami znacze\u0144. S\u0105 to obrazy, kt\u00f3re sugeruj\u0105, co mo\u017cna zrobi\u0107, np. ikona pi\u00f3ra do pisania oznacza, \u017ce mo\u017cna wprowadzi\u0107 tekst.<\/li>\n
  5. Znakowanie \u201enegatywne\u201d \u2013 czyli informacja, \u017ce dana funkcja jest niedost\u0119pna, najcz\u0119\u015bciej jest ona „wyszarzona”.<\/li>\n<\/ol>\n

    Wystarczy zastosowa\u0107 zaledwie kilka prostych znak\u00f3w, \u017ceby w \u0142atwy spos\u00f3b sprawi\u0107, \u017ce witryna zostanie odebrana jako intuicyjna i nieskomplikowana w u\u017cyciu. U\u017cytkownicy nie chc\u0105 uczy\u0107 si\u0119 nowych funkcjonalno\u015bci, nie lubi\u0105 te\u017c, kiedy zmienia si\u0119 ich po\u0142o\u017cenie na stronie. Dlatego nie proponujmy innowacyjnych rozwi\u0105za\u0144 na si\u0142\u0119. Skoro istniej\u0105 ju\u017c pewne standardy, do kt\u00f3rych wszyscy u\u017cytkownicy Internetu zd\u0105\u017cyli si\u0119 przyzwyczai\u0107, korzystajmy z nich. Nie komplikujmy. Te proste rozwi\u0105zania zoptymalizuj\u0105 dzia\u0142anie interfejsu i sprawi\u0105, \u017ce strona b\u0119dzie prezentowa\u0107 si\u0119 bardziej estetycznie: \u201eLess is more\u201d.<\/p>\n

    Stosuj ikony i symbole zamiast tekstu<\/h2>\n

    Lepiej stosowa\u0107 symbole i u\u017cywa\u0107 ikon ni\u017c wprowadza\u0107 tekstowe wyja\u015bnienia. Dzi\u0119ki ikonom unikniemy potrzeby opisywania, o co nam chodzi, a strona nie zostanie prze\u0142adowana tekstem. Starajmy si\u0119, je\u015bli to oczywi\u015bcie mo\u017cliwie, minimalizowa\u0107 ilo\u015b\u0107 tekstu na stronie, daj\u0105c si\u0119 wykaza\u0107 zdolno\u015bciom artystycznym naszego grafika ;).
    \nCdn. \ud83d\ude42 Cz\u0119\u015b\u0107 druga ju\u017c za tydzie\u0144.<\/p>\n

    Czytaj wi\u0119cej:<\/strong>
    \n    „Stw\u00f3rz produkt idealny. Projektuj z my\u015bl\u0105 o User Experience i pracuj zespo\u0142owo!”<\/a><\/span>
    \n    „Wpadnij do Wroc\u0142awia na \u015awiatowy Dzie\u0144 U\u017cyteczno\u015bci”<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

    Prawo Hicka m\u00f3wi, \u017ce im wi\u0119cej mamy mo\u017cliwo\u015bci podczas pracy nad zadaniem, tym wi\u0119cej czasu… Wi\u0119cej→<\/span><\/a><\/p>\n","protected":false},"author":7,"featured_media":3718,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[154],"tags":[161],"yoast_head":"\n\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\n\n\t\n\t\n\t\n