{"id":44006,"date":"2022-09-17T15:41:49","date_gmt":"2022-09-17T13:41:49","guid":{"rendered":"https:\/\/firmbee.com\/?p=44006"},"modified":"2023-01-02T15:25:11","modified_gmt":"2023-01-02T14:25:11","slug":"przyklady-dobrego-projektowania-ux","status":"publish","type":"post","link":"https:\/\/firmbee.com\/pl\/przyklady-dobrego-projektowania-ux","title":{"rendered":"Przyk\u0142ady dobrego projektowania UX | The ultimate UX Guide #16"},"content":{"rendered":"

Sk\u0105d czerpa\u0107 inspiracj\u0119 w pracy UX designera? Jak odr\u00f3\u017cni\u0107 dobre projekty UX od tych z\u0142ych? Postaramy si\u0119 odpowiedzie\u0107 na te pytania, a tak\u017ce pokaza\u0107 kilka interfejs\u00f3w prezentuj\u0105cych przyk\u0142ady dobrego projektowania UX.<\/strong><\/p>\r\n\r\n

Przyk\u0142ady dobrego projektowania UX – om\u00f3wione zagadnienia:<\/h2>\r\n
    \r\n
  1. Sk\u0105d czerpa\u0107 projektowe inspiracje?<\/a><\/li> \t\r\n
  2. Jak rozpozna\u0107 projekt dobry pod k\u0105tem UX <\/a><\/li>\r\n
  3. Przyk\u0142ad dobrego UX designu – Google<\/a><\/li>\t\r\n
  4. Przyk\u0142ad dobrego UX designu – Apple<\/a><\/li> \r\n
  5. Przyk\u0142ad dobrego UX designu – Airbnb<\/a><\/li> \t\r\n<\/ol>\r\n\r\n

    Sk\u0105d czerpa\u0107 projektowe inspiracje?<\/h4>\r\n

    Bran\u017ca UX jest aktualnie bran\u017c\u0105 bardzo szybko rozwijaj\u0105c\u0105 si\u0119 i dynamicznie zmieniaj\u0105c\u0105. Jednym z obowi\u0105zk\u00f3w dobrego UX designera jest \u015bledzenie aktualnych trend\u00f3w, bycie na bie\u017c\u0105co ze zmieniaj\u0105c\u0105 si\u0119 technologi\u0105 i szukanie inspiracji w\u015br\u00f3d lider\u00f3w z bran\u017cy. Projektant, kt\u00f3ry unika tych czynno\u015bci \u2014 zwyczajnie si\u0119 nie rozwija. Bran\u017ca UX wymaga nieustannego zainteresowania, dociekania, szukania inspiracji i nowych metod badawczych czy projektowych, por\u00f3wnywania i wdra\u017cania innowacji. <\/p>\r\n

    Sk\u0105d jednak czerpa\u0107 inspiracje w dziedzinie UX?<\/strong> Z pewno\u015bci\u0105 wiele os\u00f3b poleci znane portale dla projektant\u00f3w takie jak Dribble czy Behance. Nale\u017cy jednak by\u0107 z tym ostro\u017cnym i podchodzi\u0107 do nich z pewnym dystansem. Na portalach tych znajdziemy ogrom case studies projekt\u00f3w z r\u00f3\u017cnych bran\u017c, tworzonych przez projektant\u00f3w z ca\u0142ego \u015bwiata. Daje to mo\u017cliwo\u015b\u0107 poznania r\u00f3\u017cnych punkt\u00f3w widzenia, jednak nale\u017cy pami\u0119ta\u0107, \u017ce s\u0105 to portale gdzie tak naprawd\u0119 ka\u017cdy kto za\u0142o\u017cy konto mo\u017ce umieszcza\u0107 swoje projekty. Wiele z nich to projekty niekomercyjne, tworzone \u201edo szuflady\u201d w ramach kursu UX czy samodzielnie przez osoby, kt\u00f3re nie pracuj\u0105 jako UX designer \u2013 a np. dopiero si\u0119 ucz\u0105. <\/p>\r\n

    W takich projektach cz\u0119sto skupienie pada na warstw\u0119 wizualn\u0105 \u2013 UI, a sam UX pozostaje w tyle. Brakuje bada\u0144, wymaga\u0144 biznesowych, okre\u015blenia problemu, celu ca\u0142ego procesu czy potrzeb u\u017cytkownik\u00f3w, co sprawia, \u017ce projekt mo\u017ce i jest atrakcyjny wizualnie, ale niekoniecznie przemy\u015blany i poparty badaniami i danymi. Ci\u0119\u017cko wi\u0119c tu m\u00f3wi\u0107 o dobrej inspiracji dla UX designera. O wiele bardziej warto\u015bciowe tre\u015bci mo\u017cemy znale\u017a\u0107 w case studies znanych agencji UX czy nawet na stronach firm uchodz\u0105cych za przoduj\u0105ce w dziedzinie user experience. Kilka z nich zostanie om\u00f3wionych w dalszej cz\u0119\u015bci tekstu.<\/p>\r\n\r\n

    Jak rozpozna\u0107 projekt dobry pod k\u0105tem UX?<\/h3>\r\n

    Mimo wszystko bogactwo Internetu pozwala na czerpanie inspiracji z wielu \u017ar\u00f3de\u0142 (tak\u017ce Dribble czy Behance \u2013 nie negujemy ich ca\u0142kowicie). Jak ju\u017c nieraz pisali\u015bmy \u2013 podstawow\u0105 cech\u0105 dobrego projektanta jest umiej\u0119tno\u015b\u0107 przeprowadzania researchu i wyci\u0105gania wniosk\u00f3w<\/strong>. Mo\u017cna to prze\u0142o\u017cy\u0107 tak\u017ce na umiej\u0119tno\u015b\u0107 szukania inspiracji projektowych. Co jednak powinien przedstawia\u0107 projekt, kt\u00f3ry mo\u017cna zaklasyfikowa\u0107 jako dobry pod wzgl\u0119dem user experience?<\/p>\r\n

      \r\n
    1. Przede wszystkim powinien zawiera\u0107 case study<\/strong>, w kt\u00f3rym przedstawione b\u0119d\u0105 dane z przeprowadzonych bada\u0144, user problem, cele biznesowe oraz KPI \u2013 metryki, kt\u00f3re pozwol\u0105 sprawdzi\u0107, czy projekt po wdro\u017ceniu odnosi zak\u0142adany \u201esukces\u201d.\r\n

      Przyk\u0142ady dobrego projektowania<\/h3>\r\n

      Przyk\u0142adem mo\u017ce by\u0107 sklep z elektronik\u0105. Ich problemem jest du\u017ca liczba porzuce\u0144 koszyka przez u\u017cytkownik\u00f3w. Celem projektu b\u0119dzie poznanie przyczyny takiego zachowania i rozwi\u0105zanie tego problemu.<\/em><\/p>\r\n

      Po analizie danych z Google Analytics i hotjar oraz przeprowadzeniu bada\u0144 z u\u017cytkownikami okazuje si\u0119, \u017ce ich najwi\u0119kszym problemem jest brak dost\u0119pno\u015bci wybranego towaru \u2013 o czym dowiaduj\u0105 si\u0119 dopiero w koszyku, chc\u0105c sfinalizowa\u0107 zam\u00f3wienie produktu. Projekt oczywi\u015bcie b\u0119dzie wymaga\u0142 szerszej analizy, researchu i wprowadzenia zmian w funkcjonalno\u015bci interfejsu. \u0141atwo wywnioskowa\u0107, \u017ce tutaj czynnikiem mierz\u0105cym sukces po wdro\u017ceniu b\u0119dzie spadek liczby porzuce\u0144 koszyka i wzrost konwersji na stronie (osoby odwiedzaj\u0105ce stron\u0119 a osoby dokonuj\u0105ce zakupu).<\/em><\/p>\r\n

      Mamy wi\u0119c jasno okre\u015blony problem \u2013 zar\u00f3wno z punktu widzenia biznesu jak i u\u017cytkownika, mamy cel i ustalone mierniki sukcesu.<\/em><\/p><\/li>\r\n

    2. Samo przeprowadzenie bada\u0144 w odpowiedni spos\u00f3b to oczywi\u015bcie nie wszystko \u2013 ich analiza i wyniki musz\u0105 mie\u0107 prze\u0142o\u017cenie na finalny projekt interfejsu<\/strong>. W case study zwracamy wi\u0119c uwag\u0119 czy projekt faktycznie odpowiada na potrzeby u\u017cytkownik\u00f3w i rozwi\u0105zuje problem projektowy.<\/li>\r\n
    3. Projekt dobry pod wzgl\u0119dem UX to te\u017c oczywi\u015bcie projekt, kt\u00f3ry b\u0119dzie spe\u0142nia\u0142 wymogi stawiane przez heurystyki u\u017cyteczno\u015bci Nielsena<\/strong>. Heurystyki to uniwersalne zasady b\u0119d\u0105ce podstawow\u0105 technik\u0105 analizy interfejs\u00f3w pod k\u0105tem ich u\u017cyteczno\u015bci. Stosowanie si\u0119 do nich pozwala projektantowi zoptymalizowa\u0107 zar\u00f3wno wygl\u0105d, jak i dzia\u0142anie serwisu oraz jest dobr\u0105 praktyk\u0105 projektow\u0105.<\/li>\r\n<\/ol>\r\n

      Oczywi\u015bcie przeprowadzanie kompleksowych bada\u0144, a tak\u017ce dbanie i rozwijanie UX na wysokim poziomie wymaga sporego nak\u0142adu finansowego jak i czasowego, a tak\u017ce do\u015bwiadczonego zespo\u0142u specjalist\u00f3w UX i UI, programist\u00f3w, analityk\u00f3w i kadry zarz\u0105dzaj\u0105cej. Nic wi\u0119c dziwnego, \u017ce bardzo dobrym UX mog\u0105 pochwali\u0107 si\u0119 du\u017ce, mi\u0119dzynarodowe firmy technologiczne \u2013 jak np. Google czy Apple.<\/p>\r\n\r\n

      Przyk\u0142ad dobrego UX designu – Google<\/h2>\r\n

      Google, b\u0119d\u0105cy na rynku od 1998 roku z pewno\u015bci\u0105 stanowi czo\u0142\u00f3wk\u0119 je\u015bli chodzi o przyk\u0142ady dobrego projektowania, i tego jak mo\u017ce wygl\u0105da\u0107 dobry UX. Wyszukiwarka Google jest jednym z najprostszych narz\u0119dzi dost\u0119pnych w sieci. Jej obs\u0142uga jest intuicyjna i nie sprawia problemu przeci\u0119tnemu u\u017cytkownikowi Internetu. Spe\u0142nia wymogi wywodz\u0105ce si\u0119 z heurystyk Nielsena \u2013 jest prosta, czysta, przejrzysta, estetyczna. Nie zawiera zb\u0119dnych link\u00f3w, button\u00f3w czy baner\u00f3w. Od razu \u0142atwo si\u0119 na niej odnale\u017a\u0107 i na pierwszy rzut oka wida\u0107, do czego s\u0142u\u017cy \u2013 do wyszukiwania. <\/p>\r\n

      Dodatkowo wyszukiwarka pokazuje ostatnio wyszukiwane has\u0142a, podpowiada wyszukiwania pokrewne i poprawia nas w przypadku liter\u00f3wki we wpisanej przez nas b\u0142\u0119dnie frazie. Odpowiada wi\u0119c na potrzeb\u0119 u\u017cytkownik\u00f3w i maksymalnie u\u0142atwia im ca\u0142y proces wyszukiwania.<\/p>\r\n\"UX\"\r\n\"UX\"\r\n\"UX\"\r\n\r\n

      Przyk\u0142ad dobrego UX designu – Apple<\/h3>\r\n

      Strona Apple to nie tylko pi\u0119kny design, ale te\u017c starannie opracowane UX. Strona posiada bardzo \u0142atw\u0105, intuicyjn\u0105 nawigacj\u0119. Pasek nawigacji zawiera nie tylko nazwy kategorii, ale te\u017c ma\u0142e obrazki produkt\u00f3w co pozwala naprawd\u0119 szybko porusza\u0107 si\u0119 po stronie. J\u0119zyk, kt\u00f3rym pos\u0142uguj\u0105 si\u0119 na stronie, jest prosty, ale kreatywny. Bez zb\u0119dnego opisu przedstawia konkretn\u0105 warto\u015b\u0107 danego produktu dla u\u017cytkownika. <\/p>\r\n

      Strona pozwala por\u00f3wna\u0107 produkty z danej kategorii, i w \u0142atwy spos\u00f3b wybra\u0107 ten odpowiadaj\u0105cy potrzebom u\u017cytkownika. Apple k\u0142adzie du\u017cy nacisk na innowacyjny, ale minimalistyczny UI \u2014 czyli wygl\u0105d i estetyk\u0119 strony \u2014 co jak pami\u0119tamy, jest tak\u017ce jedn\u0105 z heurystyk Nielsena, wp\u0142ywa na odbi\u00f3r strony przez u\u017cytkownika i na jego do\u015bwiadczenia z produktem.<\/p>\r\n

      Co ciekawe, Apple na swojej stronie<\/a> dzieli si\u0119 najlepszymi praktykami projektowymi, udost\u0119pnia gotowe mockupy do pobrania, materia\u0142y edukacyjne i wytyczne Human Interface Guidelines<\/p>\r\n\"UX\"\r\n\"UX\"\r\n\"UX\"\r\n\r\n

      Przyk\u0142ad dobrego UX designu – Airbnb<\/h3>\r\n

      Od samego powstania w 2008 roku Airbnb (platforma umo\u017cliwiaj\u0105ca wynajem lokali od os\u00f3b prywatnych) cieszy si\u0119 du\u017c\u0105 popularno\u015bci\u0105 w\u015br\u00f3d u\u017cytkownik\u00f3w \u2014 jednym z g\u0142\u00f3wnych powod\u00f3w jest oczywi\u015bcie \u015bwietnie zaprojektowany UX.<\/p>\r\n

      Przyk\u0142ady dobrego projektowania w tym przypadku stanowi\u0105 wszystkie podstrony. Strona g\u0142\u00f3wna jest czysta i przejrzysta, na \u015brodku strony widzimy pole wyszukiwania \u2014 znane wszystkim, chocia\u017cby z wyszukiwarki Google. Jest to wi\u0119c zastosowanie dobrego, znanego ju\u017c u\u017cytkownikom patternu, co sprawia, \u017ce strona jest intuicyjna i u\u017cytkownik nie ma poczucia \u201ezagubienia\u201d. Inn\u0105 charakterystyczn\u0105 dobr\u0105 praktyk\u0105 UX na Airbnb jest widok mapy z widocznymi cenami obok listy wyszukiwanych miejsc. Airbnb pozwala wi\u0119c w jednym miejscu zobaczy\u0107 wszystkie najwa\u017cniejsze informacje \u2014 lokalizacj\u0119 domu na mapie, cen\u0119, jego zdj\u0119cia i nazw\u0119. <\/p>\r\n

      Strona \u015bwietnie podchodzi te\u017c do tre\u015bci \u2014 UX writing jest na bardzo wysokim poziomie i przekazuje wa\u017cne informacje w prosty spos\u00f3b. Przyk\u0142adem mo\u017ce by\u0107 tekst \u201ep\u0142atno\u015b\u0107 nie zostanie jeszcze naliczona\u201d w momencie wst\u0119pnej rezerwacji \u2014 u\u017cytkownik dostaje jasn\u0105 informacj\u0119, \u017ce p\u0142atno\u015b\u0107 nie zostanie pobrana a\u017c do momentu potwierdzenia rezerwacji.<\/p>\r\n

      Airbnb podobnie jak Apple dzieli si\u0119 dobrymi praktykami, ciekawymi case studies i nowinkami ze \u015bwiata designu na swojej podstronie<\/a><\/p>\r\n\"UX\"\r\n\"UX\"\r\n\"UX\"\r\n\r\n

      Sprawd\u017a ca\u0142y cykl: UX Guide<\/a><\/p>\r\n\r\n

      Je\u015bli podobaj\u0105 Ci si\u0119 tre\u015bci, kt\u00f3re tworzymy, sprawd\u017a r\u00f3wnie\u017c: Facebook, <\/a> Twitter, <\/a> LinkedIn, <\/a> Instagram, <\/a>YouTube, <\/a>Pinterest.<\/a><\/strong><\/p>\r\n\r\n\r\n\r\n","protected":false},"excerpt":{"rendered":"Sk\u0105d czerpa\u0107 inspiracj\u0119 w pracy UX designera? Jak odr\u00f3\u017cni\u0107 dobre projekty UX od tych z\u0142ych? Postaramy si\u0119 odpowiedzie\u0107 na te pytania, a tak\u017ce pokaza\u0107 kilka […]","protected":false},"author":11,"featured_media":44036,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[530,565],"tags":[],"class_list":["post-44006","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-pl","category-wprowadzenie-do-ux"],"acf":{"faq":null,"seria_wpisow":"Wprowadzenie do UX","tytul_w_serii":"Przyk\u0142ady dobrego projektowania UX","":"","naglowek_spisu_tresci":"","spis-tresci-lista":null},"_links":{"self":[{"href":"https:\/\/firmbee.com\/pl\/wp-json\/wp\/v2\/posts\/44006","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/firmbee.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/firmbee.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/firmbee.com\/pl\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/firmbee.com\/pl\/wp-json\/wp\/v2\/comments?post=44006"}],"version-history":[{"count":6,"href":"https:\/\/firmbee.com\/pl\/wp-json\/wp\/v2\/posts\/44006\/revisions"}],"predecessor-version":[{"id":52207,"href":"https:\/\/firmbee.com\/pl\/wp-json\/wp\/v2\/posts\/44006\/revisions\/52207"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/firmbee.com\/pl\/wp-json\/wp\/v2\/media\/44036"}],"wp:attachment":[{"href":"https:\/\/firmbee.com\/pl\/wp-json\/wp\/v2\/media?parent=44006"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/firmbee.com\/pl\/wp-json\/wp\/v2\/categories?post=44006"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/firmbee.com\/pl\/wp-json\/wp\/v2\/tags?post=44006"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}