Tworzenie aplikacji mobilnych najcz\u0119\u015bciej kojarzone jest z linijkami kodu niezrozumia\u0142ego dla \u201ezwyk\u0142ych \u015bmiertelnik\u00f3w\u201d. Jednak to nie wystarczy, by aplikacja by\u0142a przejrzysta, funkcjonalna i prosta w obs\u0142udze. Za to, by program by\u0142 dostosowany do u\u017cytkownika i stworzony z my\u015bl\u0105 o nim, odpowiadaj\u0105 UI i UX. Z tego artyku\u0142u dowiesz si\u0119, co oznaczaj\u0105 oba skr\u00f3ty, dlaczego s\u0105 tak wa\u017cne oraz jakich b\u0142\u0119d\u00f3w trzeba si\u0119 wystrzega\u0107.<\/p>\n
UX design skupia si\u0119 na tym, w jaki spos\u00f3b u\u017cytkownik korzysta z aplikacji. Zadaniem UX designera jest odkrycie, w jaki spos\u00f3b my\u015bli i dzia\u0142a osoba u\u017cywaj\u0105ca danego programu. Pierwszy etap prac to przeanalizowanie konkurencji oraz indywidualnych cech grupy docelowej. Nast\u0119pnie przyjdzie czas na makietowanie, prototypy i testy proponowanych rozwi\u0105za\u0144. Efektem ma by\u0107 produkt, kt\u00f3ry jest intuicyjny, funkcjonalny i przyjemny w odbiorze. Jednym zdaniem: satysfakcjonuj\u0105cy dla u\u017cytkownika.<\/p>\n
UX designer musi zatem przeanalizowa\u0107 potrzeby u\u017cytkownik\u00f3w tak, by aplikacja by\u0142a jak najlepiej dostosowana do odbiorc\u00f3w. Odpowiada on za zaprojektowanie sposobu dzia\u0142ania produktu i schematu budowy aplikacji, czyli m.in. rozmieszczenie poszczeg\u00f3lnych przycisk\u00f3w, ustalenie, jakie elementy maj\u0105 znale\u017a\u0107 si\u0119 na stronie g\u0142\u00f3wnej i jak rozbudowane powinno by\u0107 menu. Ostatnim obowi\u0105zkiem UX designera podczas tworzenia aplikacji jest testowanie wdro\u017conych rozwi\u0105za\u0144 i ewentualne ich poprawianie.<\/p>\n
UI design odpowiada za ko\u0144cowy wygl\u0105d aplikacji. Grafik opracowuje wygl\u0105d przycisk\u00f3w, typografi\u0119, dobiera styl, kolory, fotografie i grafiki. Jego zadaniem jest takie przygotowanie wizualne aplikacji, \u017ceby by\u0142a przejrzysta, sp\u00f3jna i mi\u0142a dla oka u\u017cytkownika. Projektowanie wygl\u0105du produktu musi odbywa\u0107 si\u0119 przy sta\u0142ej wsp\u00f3\u0142pracy z UX designerem, jednak nie ma wp\u0142ywu na funkcjonowanie aplikacji, a wy\u0142\u0105cznie na jej odbi\u00f3r.<\/p>\n
Cho\u0107 zadanie zaprojektowania \u201eczego\u015b \u0142adnego\u201d mo\u017ce wydawa\u0107 si\u0119 z pozoru banalne, wcale takie nie jest. Grafik musi pami\u0119ta\u0107, \u017ce to, co dla niego jest estetyczne, nie musi takie by\u0107 dla klienta. Dlatego te\u017c pierwszym etapem jego pracy jest przeanalizowanie grupy odbiorczej i dostosowanie wygl\u0105du aplikacji do jej wymaga\u0144 \u2013 nie jest wszak tajemnic\u0105, \u017ce inn\u0105 szat\u0119 graficzn\u0105 przygotuje dla senior\u00f3w, a inn\u0105 dla m\u0142odzie\u017cy.<\/p>\n
Opr\u00f3cz tworzenia oprawy graficznej do zada\u0144 UI designera nale\u017c\u0105 r\u00f3wnie\u017c: opracowanie interakcji pomi\u0119dzy poszczeg\u00f3lnymi elementami systemu, przej\u015b\u0107 mi\u0119dzy r\u00f3\u017cnymi widokami oraz adaptacja element\u00f3w do wszystkich rozdzielczo\u015bci ekran\u00f3w.<\/p>\n
\u017beby lepiej zrozumie\u0107 wsp\u00f3\u0142dzia\u0142anie UI i UX designu, warto prze\u015bledzi\u0107 proces projektowania aplikacji.<\/p>\n
Analiza grupy odbiorczej \u2013 to pierwszy, kluczowy i w\u0142a\u015bciwie\u2026 nigdy nieko\u0144cz\u0105cy si\u0119 proces. Polega na zbieraniu informacji od u\u017cytkownik\u00f3w, by jak najlepiej dostosowa\u0107 produkt do ich preferencji. Na pocz\u0105tku przeprowadza si\u0119 wywiady z grup\u0105 odbiorcz\u0105, definiuje ich wymagania, spisuje tzw. user stories i na ich podstawie tworzy persony, czyli \u201eodbicie\u201d tego, kim jest klient. Opr\u00f3cz tego UX designer musi r\u00f3wnie\u017c skonsultowa\u0107 si\u0119 z programistami w sprawie ogranicze\u0144 technologii.
\nKolejne badania przeprowadza si\u0119 ju\u017c po stworzeniu i opublikowaniu aplikacji \u2013 w tym przypadku sprawdza si\u0119, jak u\u017cytkownicy korzystaj\u0105 z produktu i czy mo\u017cna go w jaki\u015b spos\u00f3b usprawni\u0107. Popularno\u015b\u0107 poszczeg\u00f3lnych funkcji czy czas sp\u0119dzony w aplikacji pozwalaj\u0105 monitorowa\u0107 takie narz\u0119dzia jak np. Google Analytics;<\/p>\n<\/li>\n
Stworzenie prototypu \u2013 w tym miejscu wymagania s\u0105 przek\u0142adane na rzeczywisto\u015b\u0107. Projektowane s\u0105: ekran g\u0142\u00f3wny, rozmieszczenie przycisk\u00f3w i funkcji oraz nawigacja w aplikacji. Dobr\u0105 praktyk\u0105 jest stworzenie tzw. user flow, czyli zobrazowania zale\u017cno\u015bci pomi\u0119dzy ekranami, oraz user journey, kt\u00f3re opisuj\u0105 konkretne przypadki korzystania z aplikacji \u2013 pozwala to na uwidocznienie liczby ekran\u00f3w i po\u0142\u0105cze\u0144 mi\u0119dzy nimi;<\/p>\n<\/li>\n
Faza test\u00f3w –\u00a0 nawet najdok\u0142adniejsze przeanalizowanie potrzeb u\u017cytkownik\u00f3w i pr\u00f3ba dostosowania aplikacji nie oddadz\u0105 tego, jak u\u017cytkownicy naprawd\u0119 korzystaj\u0105 z aplikacji. Dlatego tak wa\u017cne jest przeprowadzenie test\u00f3w \u2013 mo\u017ce okaza\u0107 si\u0119, \u017ce odbiorca nawiguje po aplikacji w zupe\u0142nie inny spos\u00f3b, ni\u017c zosta\u0142o to przewidziane. Ka\u017cda uwaga od tester\u00f3w mo\u017ce by\u0107 pomocna i poprawi\u0107 komfort u\u017cytkowania;<\/p>\n<\/li>\n
Projektowanie oprawy graficznej \u2013 na tym etapie wkracza UI designer, odpowiedzialny za wygl\u0105d aplikacji. Oczywi\u015bcie stworzenie \u201eidealnie estetycznego\u201d produktu jest niemo\u017cliwe, poniewa\u017c ka\u017cdy ma inny gust. Dobrym pomys\u0142em jest kierowanie si\u0119 zasad\u0105 minimalizmu \u2013 ograniczenie element\u00f3w dekoracyjnych sprawi, \u017ce aplikacja b\u0119dzie bardziej przejrzysta i czytelna.<\/p>\n<\/li>\n<\/ol>\n
User Experience to perspektywa biznesowo-techniczna, natomiast User Interface \u2013 estetyczna. Cho\u0107 teoretycznie s\u0105 to dwie niezale\u017cne dziedziny, tak naprawd\u0119 ich wsp\u00f3\u0142praca jest niezwykle wa\u017cna. \u017baden z u\u017cytkownik\u00f3w nie zostanie d\u0142u\u017cej przy aplikacji, kt\u00f3ra jest \u0142adna, ale nie spe\u0142nia wszystkich zada\u0144, lub odwrotnie \u2013 jest funkcjonalna, ale jej wygl\u0105d nie jest zbyt estetyczny. Odbiorcy szukaj\u0105 produktu, kt\u00f3ry \u0142\u0105czy jedno i drugie, a to zapewnia wy\u0142\u0105cznie wsp\u00f3\u0142praca projektant\u00f3w UI i UX.<\/p>\n
Wydawa\u0142oby si\u0119, \u017ce znaczenie dobrego projektowania UX i UI jest oczywiste, jednak\u2026 nie do ko\u0144ca. Nierzadko mo\u017cna spotka\u0107 osoby, kt\u00f3re twierdz\u0105, \u017ce dog\u0142\u0119bne zastanawianie si\u0119 nad do\u015bwiadczeniami u\u017cytkownik\u00f3w i projektowanie specjalnej, dostosowanej do nich szaty graficznej to jedynie dodatek do projektu. Dodatek potrzebny, ale nie niezb\u0119dny. Jakich b\u0142\u0119d\u00f3w nale\u017cy si\u0119 wystrzega\u0107?<\/p>\n
Pierwszym jest pomijanie pocz\u0105tkowego etapu projektowania, czyli bada\u0144, kt\u00f3re s\u0105 w\u0142a\u015bciwie najwa\u017cniejszym elementem tworzenia produktu. Bez znajomo\u015bci konkurencji oraz wiedzy na temat tego, dla kogo projektowana jest aplikacja, nie ma szans na dotarcie do konkretnej grupy odbiorc\u00f3w. Nieprzemy\u015blany produkt nie b\u0119dzie spe\u0142nia\u0142 okre\u015blonych potrzeb u\u017cytkownik\u00f3w i zginie w\u015br\u00f3d innych, bardziej dopracowanych propozycji. Dodatkowo, je\u015bli nie poznamy zachowa\u0144 u\u017cytkownik\u00f3w, czyli tego, kiedy i w jaki spos\u00f3b korzystaj\u0105 z aplikacji, mo\u017ce okaza\u0107 si\u0119, \u017ce aplikacja b\u0119dzie przydatna tylko dla jej autora.<\/p>\n
Kolejny b\u0142\u0105d to brak umiaru. Lepszym pomys\u0142em b\u0119dzie kierowanie si\u0119 zasad\u0105 minimalizmu, o kt\u00f3rym wspominali\u015bmy ju\u017c wcze\u015bniej \u2013 mowa tutaj nie tylko o sferze graficznej, ale r\u00f3wnie\u017c o contencie. UX odpowiada za jako\u015b\u0107 strony, czyli dba o odpowiedni\u0105 ilo\u015b\u0107 tre\u015bci i intuicyjn\u0105 nawigacj\u0119. Zbyt du\u017ca liczba reklam, wyskakuj\u0105cych okienek czy problemy ze znalezieniem jakiej\u015b funkcji mog\u0105 doprowadzi\u0107 do tego, \u017ce u\u017cytkownik poczuje si\u0119 zagubiony i szybko przestanie korzysta\u0107 z aplikacji.<\/p>\n
Warto te\u017c mie\u0107 na uwadze stron\u0119 czysto techniczn\u0105. Jedn\u0105 z najcz\u0119\u015bciej pomijanych rzeczy jest responsywno\u015b\u0107, czyli dostosowanie aplikacji do wielu rozmiar\u00f3w ekranu. Jest to istotne dlatego, \u017ce z aplikacji mobilnych mo\u017cna korzysta\u0107 na urz\u0105dzeniach o r\u00f3\u017cnych rozdzielczo\u015bciach.<\/p>\n
Trzeba r\u00f3wnie\u017c pami\u0119ta\u0107, by aplikacja by\u0142a tworzona w konkretnym celu \u2013 ma by\u0107 przydatna dla u\u017cytkownik\u00f3w i budowa\u0107 ich zwi\u0105zek z mark\u0105. Jedynym rozwi\u0105zaniem jest wsp\u00f3\u0142praca ze specjalistami, kt\u00f3rzy wezm\u0105 pod uwag\u0119 cele biznesowe firmy. Inaczej produkt b\u0119dzie jedynie \u201esztuk\u0105 dla sztuki\u201d.<\/p>\n
User Experience i User Interface design to dwie odr\u0119bne dziedziny, jednak nierozerwalnie ze sob\u0105 zwi\u0105zane. Tylko po\u0142\u0105czenie pracy grafik\u00f3w i os\u00f3b odpowiedzialnych za funkcjonalno\u015b\u0107 pozwoli na stworzenie aplikacji, z kt\u00f3rej u\u017cytkownicy b\u0119d\u0105 ch\u0119tnie korzysta\u0107. Jest to tym wa\u017cniejsze, \u017ce obecnie na rynku znale\u017a\u0107 mo\u017cna setki podobnych produkt\u00f3w, potrzeba wi\u0119c nie lada wysi\u0142ku, by zainteresowa\u0107 odbiorc\u0119 i, co wa\u017cniejsze, zatrzyma\u0107 go na d\u0142u\u017cej.<\/p>\n","protected":false},"excerpt":{"rendered":"
Czym jest UI\/UX design? Tworzenie aplikacji mobilnych najcz\u0119\u015bciej kojarzone jest z linijkami kodu niezrozumia\u0142ego dla \u201ezwyk\u0142ych \u015bmiertelnik\u00f3w\u201d. Jednak to nie wystarczy, by aplikacja by\u0142a przejrzysta, funkcjonalna i prosta w obs\u0142udze. Za to, by program by\u0142 dostosowany do u\u017cytkownika i stworzony z my\u015bl\u0105 o nim, odpowiadaj\u0105 UI i UX. Z tego artyku\u0142u dowiesz si\u0119, co oznaczaj\u0105 […]<\/p>\n","protected":false},"author":3,"featured_media":2666,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[60],"tags":[],"class_list":["post-2588","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-aktualnosci"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/appvinio.com\/pl\/wp-json\/wp\/v2\/posts\/2588","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/appvinio.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/appvinio.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/appvinio.com\/pl\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/appvinio.com\/pl\/wp-json\/wp\/v2\/comments?post=2588"}],"version-history":[{"count":1,"href":"https:\/\/appvinio.com\/pl\/wp-json\/wp\/v2\/posts\/2588\/revisions"}],"predecessor-version":[{"id":2608,"href":"https:\/\/appvinio.com\/pl\/wp-json\/wp\/v2\/posts\/2588\/revisions\/2608"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/appvinio.com\/pl\/wp-json\/wp\/v2\/media\/2666"}],"wp:attachment":[{"href":"https:\/\/appvinio.com\/pl\/wp-json\/wp\/v2\/media?parent=2588"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/appvinio.com\/pl\/wp-json\/wp\/v2\/categories?post=2588"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/appvinio.com\/pl\/wp-json\/wp\/v2\/tags?post=2588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}