Po co nam UX\/UI Design?<\/h2>\n\n\n\n
Czy zdarzy\u0142o Ci si\u0119 korzysta\u0107 z aplikacji, kt\u00f3ra pomimo pi\u0119knego wygl\u0105du by\u0142a dla Ciebie niezrozumia\u0142a? Nie dostarcza\u0142a najwa\u017cniejszych dla Ciebie funkcjonalno\u015bci? Najpewniej brakowa\u0142o w tym przypadku zaanga\u017cowania UX Designera. <\/p>\n\n\n\n Jest to osoba, z kt\u00f3r\u0105 klient powinien mie\u0107 kontakt ju\u017c na samym pocz\u0105tku, gdy tylko pojawi si\u0119 idea produktu. Wsp\u00f3\u0142praca mi\u0119dzy pomys\u0142odawc\u0105 a UX Designer\u2019em jest bardzo wa\u017cna. W firmie itCraft<\/a> stawiamy na warsztaty, kt\u00f3re pomog\u0105 zrozumie\u0107 najwa\u017cniejsze aspekty projektu. Na tym etapie zbieramy wymagania i zapisujemy pierwsze interakcje. Nast\u0119pnie tworzymy prototyp wst\u0119pnie zaprojektowanego rozwi\u0105zania. B\u0119d\u0105c UX Designerem musisz zrozumie\u0107 jak dzia\u0142a, my\u015bli oraz czuje u\u017cytkownik. <\/p>\n\n\n\n Cel pracy UX Designera: zaprojektowanie intuicyjnego rozwi\u0105zania dla okre\u015blonej grupy docelowej<\/p>\n\n\n\n Jest to kto\u015b, kto odpowiada za zwizualizowanie zaprojektowanego rozwi\u0105zania w spos\u00f3b \u201cestetyczny\u201d. UI designer odpowiada r\u00f3wnie\u017c za przystosowanie stylu aplikacji do brandingu firmy.<\/p>\n\n\n\n Nie jest to proste zadanie z racji tego, \u017ce ludzie r\u00f3\u017cni\u0105 si\u0119 od siebie poczuciem estetyki. Wa\u017cne, aby kierowa\u0107 si\u0119 wymaganiami okre\u015blonej grupy docelowej. Inaczej projektujemy aplikacje dedykowane dla os\u00f3b m\u0142odych, inaczej wewn\u0119trzne, firmowe aplikacje a jeszcze inne wymagania maj\u0105 osoby starsze. Cel pracy UI Designer\u2019a to stworzenie projektu w zgodzie z trendami, wymaganiami klienta i grupy docelowej oraz zdefiniowanymi stylami (np. Material Design).<\/p>\n\n\n\n Ca\u0142y proces projektowania w zgodzie ze sztuk\u0105 UX i UI opiera si\u0119 na wnioskach z obserwacji u\u017cytkownik\u00f3w ko\u0144cowych, a tak\u017ce weryfikacji pomys\u0142\u00f3w i wymaga\u0144. Okre\u015blamy i badamy nast\u0119puj\u0105ce punkty:<\/p>\n\n\n\n Nast\u0119pnie badamy reakcje na wymy\u015blone przez nas rozwi\u0105zania, a tak\u017ce sprawdzamy czy maj\u0105 szans\u0119 ewoluowa\u0107 w przysz\u0142o\u015bci w kolejne funkcjonalno\u015bci. <\/p>\n\n\n\n Ka\u017cdy z nas ma pewne przyzwyczajenia, o kt\u00f3rych cz\u0119sto nie zdajemy sobie nawet sprawy. R\u00f3wnie\u017c w trakcie korzystania z r\u00f3\u017cnych aplikacji i urz\u0105dze\u0144 pojawi\u0105 si\u0119 pewne nawyki. Je\u015bli wi\u0119kszo\u015b\u0107 u\u017cytkownik\u00f3w u\u017cywa do obs\u0142ugi telefonu tylko jednej r\u0119ki operuj\u0105c g\u0142\u00f3wnie kciukiem, to powinni\u015bmy kierowa\u0107 si\u0119 tym, aby najwa\u017cniejsze funkcje by\u0142y w zasi\u0119gu kciuka. <\/p>\n\n\n\n Umieszczanie w aplikacji element\u00f3w funkcjonalnych odbiegaj\u0105cych wygl\u0105dem lub zachowaniem od tych powszechnie stosowanych mo\u017ce budzi\u0107 du\u017ce w\u0105tpliwo\u015bci podczas u\u017cytkowania. Je\u015bli przy ka\u017cdym prezentowaniu aplikacji konieczne jest t\u0142umaczenie w jaki spos\u00f3b nale\u017cy z niej korzysta\u0107 to znaczy, \u017ce co\u015b jest nie tak.<\/p>\n\n\n\n Podczas projektowania staramy si\u0119 umieszcza\u0107 funkcje w takich miejscach, w kt\u00f3rych u\u017cytkownik spodziewa si\u0119 je znale\u017a\u0107. Oznaczamy je tak\u017ce ikonami sygnalizuj\u0105cymi przeznaczenie funkcji.<\/p>\n\n\n\n Ikony, przyciski i inne elementy layoutu aplikacji powinny by\u0107 od siebie odseparowane, a tak\u017ce odpowiednio du\u017ce. Chodzi o zachowanie czytelno\u015bci i minimalnego pola \u201ctouch target\u201d. Je\u015bli chodzi o projektowanie formularzy nale\u017cy pami\u0119ta\u0107 o tym, \u017ce u\u017cytkownicy aplikacji mobilnych niech\u0119tnie podejmuj\u0105 si\u0119 wype\u0142niania wielu p\u00f3l na telefonie.<\/p>\n\n\n\n Pola tekstowe powinno ogranicza\u0107 si\u0119 do minimum, a tak\u017ce u\u0142atwia\u0107 ich uzupe\u0142nianie. Dlatego w formularzach mobilnych u\u017cywamy: Dodatkowo, u\u017cytkownik podczas wype\u0142niania formularzy nie powinien by\u0107 rozpraszany przez inne elementy aplikacji (widoczna nawigacja aplikacji, ikony innych funkcji). W ten spos\u00f3b \u0142atwiej b\u0119dzie mu skupi\u0107 si\u0119 na docelowym zadaniu.<\/p>\n\n\n\n Badane to w zasadzie etap, kt\u00f3ry nigdy si\u0119 nie ko\u0144czy. Analizowanie dzia\u0142a\u0144 u\u017cytkownik\u00f3w konieczne jest nawet po zako\u0144czeniu projektu. Jako elementy bada\u0144 w pocz\u0105tkowych fazach projektu podaje si\u0119: Kolejne badania, kt\u00f3re wykonujemy ju\u017c na gotowych produktach daj\u0105 nam informacje o u\u017cyteczno\u015bci wybranych funkcji. Dzi\u0119ki tym badaniom dowiadujemy si\u0119 jak u\u017cytkownicy korzystaj\u0105 z aplikacji i w jaki spos\u00f3b mo\u017cna poprawi\u0107 niekt\u00f3re interakcje. Dane do takich bada\u0144 pozwala nam zebrac m.in Google Analytics. Jeste\u015bmy w stanie dowiedzie\u0107 si\u0119 ile czasu sp\u0119dzaj\u0105 u\u017cytkownicy na danym ekranie oraz w jakie funkcje klikaj\u0105 najcz\u0119\u015bciej.<\/p>\n\n\n\n Nigdy nie jest tak, \u017ce tylko sam UX Designer i jego badania odpowiadaj\u0105 za funkcjonalno\u015b\u0107 produktu. Wa\u017cne s\u0105 r\u00f3wnie\u017c:<\/p>\n\n\n\n Stworzenie prototypu pozwala na spojrzenie na projekt z zupe\u0142nie innej perspektywy – spisane wymagania pr\u00f3bujemy urealni\u0107. Na potrzeby stworzenia projektu okre\u015blamy: <\/p>\n\n\n\n Przed przyst\u0105pieniem do projektowania w przeznaczonym do tego narz\u0119dziu, dobrym nawykiem jest rozrysowanie ekran\u00f3w na kartce. Mowa tutaj oczywi\u015bcie jedynie o szkicach – pozwala nam to wst\u0119pnie zaplanowa\u0107 prac\u0119. Innym sposobem na \u201cpierwszy krok\u201d jest rozpisanie \u201cuser flow\u201d (opisuje zale\u017cno\u015bci mi\u0119dzy ekranami) i user journey (opisuj\u0105ce poszczeg\u00f3lne case\u2019y). W ten spos\u00f3b zaznaczamy ilo\u015b\u0107 ekran\u00f3w i po\u0142\u0105czenia mi\u0119dzy nimi.<\/p>\n\n\n\n Je\u015bli mowa o narz\u0119dziach do prototypowania – w naszej firmie tworzymy prototypy na proto.io, Sketch oraz InVision. Narz\u0119dzie to pozwala na uruchomienie projektu na urz\u0105dzeniu mobilnym. Dzi\u0119ki temu przegl\u0105danie go b\u0119dzie bardziej zbli\u017cone do rzeczywistej aplikacji. Prototypy wykonujemy w odcieniach szaro\u015bci – dopiero na etapie projektowania UI prezentujemy wygl\u0105d aplikacji w kolorach.<\/p>\n\n\n\n Nie pytaj u\u017cytkownik\u00f3w czego potrzebuj\u0105. Odpowiedzi jakie uzyskasz mog\u0105 ca\u0142kowicie odbiega\u0107 od prawdziwych potrzeb. Nale\u017cy obserwowa\u0107 ich dzia\u0142ania. To w jaki spos\u00f3b korzystaj\u0105 z aplikacji, jak dochodz\u0105 do wybranych funkcji. Mo\u017ce najwa\u017cniejszych funkcji szukaj\u0105 w zupe\u0142nie innym miejscu ni\u017c zosta\u0142o to zaprojektowane? Wszystko jest mo\u017cliwe, dlatego po wrzuceniu aplikacji do sklepu\/przekazania jej do u\u017cytkownik\u00f3w docelowych mog\u0105 pojawi\u0107 si\u0119 g\u0142osy krytyki, konieczno\u015b\u0107 wprowadzenia poprawek. Nie b\u00f3jmy si\u0119 tego, jako \u017ce rozw\u00f3j aplikacji jest bardzo wa\u017cny. Je\u015bli u\u017cytkownicy zauwa\u017c\u0105, \u017ce ich uwagi s\u0105 istotne i wprowadzane s\u0105 zmiany, kt\u00f3re zwi\u0119kszaj\u0105 komfort u\u017cytkowania, na pewno to doceni\u0105.<\/p>\n\n\n\n Co sprawia, \u017ce dana aplikacja nam si\u0119 podoba? Jakie praktyki mo\u017cemy zastosowa\u0107, aby poprawi\u0107 komfort u\u017cytkownika? Jaki jest \u201cwygl\u0105d idealny\u201d – tego ka\u017cdy z nas pewnie nigdy si\u0119 nie dowie. Istniej\u0105 natomiast pewne znane fakty, kt\u00f3re wykorzystujemy podczas projektowania graficznego.<\/p>\n\n\n\n Ka\u017cdy cho\u0107 raz w \u017cyciu spotka\u0142 si\u0119 ze stwierdzeniem, \u017ce \u201cco za du\u017co to niezdrowo\u201d. To samo powiedzenie znajduje zastosowanie na etapie projektowania aplikacji mobilnych. Jak sama nazwa wskazuje – aplikacje te s\u0105 przeznaczone na telefony kom\u00f3rkowe\/ewentualnie dostosowywane r\u00f3wnie\u017c do dzia\u0142ania na tabletach. To znaczy, \u017ce mamy ograniczone miejsce i musimy postara\u0107 si\u0119 aby wszystko by\u0142o czytelne. <\/p>\n\n\n\n W przypadku urz\u0105dze\u0144 z Androidem jednym z dodatkowych wyzwa\u0144 jest fakt, \u017ce u\u017cytkownicy korzystaj\u0105 z bardzo zr\u00f3\u017cnicowanych rozmiarem telefon\u00f3w. Dlatego projektuj\u0105c aplikacje musimy pami\u0119ta\u0107, \u017ce nie ka\u017cdy b\u0119dzie mia\u0142 do dyspozycji urz\u0105dzenie z 6,5\u2019\u2019 ekranem. Niestety nie ma takiej mo\u017cliwo\u015bci aby wyszczeg\u00f3lni\u0107 wygl\u0105d danego ekranu dla ka\u017cdej rozdzielczo\u015bci, kierujemy si\u0119 wi\u0119c zasadami:<\/p>\n\n\n\n – proporcjonalno\u015b\u0107 – warto\u015bci zmieniaj\u0105 si\u0119 proporcjonalnie\/procentowo – nie w pikselach, Podczas projektowania powinni\u015bmy r\u00f3wnie\u017c bra\u0107 pod uwag\u0119 to, \u017ce u\u017cytkownicy b\u0119d\u0105 korzysta\u0107 z aplikacji w r\u00f3\u017cnych warunkach o\u015bwietleniowych. Pomimo tego, \u017ce Internet zalewaj\u0105 trendy zwi\u0105zane z u\u017cyciem gradient\u00f3w czy ma\u0142o kontrastowych zestawie\u0144 kolorystycznych powinni\u015bmy nadal na pierwszym miejscu stawia\u0107 na czytelno\u015b\u0107 prezentowanych funkcji i danych.<\/p>\n\n\n\n Je\u015bli zazwyczaj korzysta si\u0119 z jednego systemu to warto przed rozpocz\u0119ciem projektowania por\u00f3wna\u0107 t\u0119 sam\u0105 aplikacj\u0119 na systemie iOS i Android. Pozwoli nam to zaprojektowa\u0107 aplikacj\u0119 w zgodzie z wytycznymi oraz przyzwyczajeniami u\u017cytkownik\u00f3w. Niestety, czasami mylnie zak\u0142adamy, \u017ce aplikacja nie powinna si\u0119 niczym r\u00f3\u017cni\u0107 i powinni\u015bmy projektowa\u0107 j\u0105 w taki sam spos\u00f3b na obu systemach. Warto mie\u0107 \u015bwiadomo\u015b\u0107 jakie komponenty i schematy s\u0105 popularne dla wybranej platformy.<\/p>\n\n\n\n Podczas projektowania aplikacji musimy r\u00f3wnie\u017c bra\u0107 pod uwag\u0119 og\u00f3lnie przyj\u0119te zasady (cz\u0119\u015b\u0107 z nich mo\u017ce by\u0107 sprawdzana podczas weryfikacji aplikacji przed pojawieniem si\u0119 w sklepach Google Play oraz AppStore). Ka\u017cdemu pocz\u0105tkuj\u0105cemu UI Designer\u2019owi polecam lektur\u0119:<\/p>\n\n\n\n Dost\u0119pne s\u0105 r\u00f3wnie\u017c gotowe zestawy kontrolek i innych element\u00f3w interfejsu dla obu platform. Dzi\u0119ki gotowym materia\u0142om oszcz\u0119dzamy czas i mamy pewno\u015b\u0107, \u017ce projekt zawiera elementy w pe\u0142ni zgodne z systemem i \u0142atwe w implementacji. <\/p>\n\n\n\n Do tworzenia projekt\u00f3w graficznych w naszej firmie wykorzystujemy: Projektanci wsp\u00f3\u0142pracuj\u0105 z zespo\u0142em developer\u00f3w przy pomocy narz\u0119dzia Zeplin. Wszystkie makiety wraz z wytycznymi dotycz\u0105cymi stylu dost\u0119pne s\u0105 online. Programi\u015bci mog\u0105 w prosty spos\u00f3b sprawdzi\u0107 jaka czcionka, kolor, margines zosta\u0142 u\u017cyty w danym miejscu. Narz\u0119dzie to pozwala r\u00f3wnie\u017c na eksport ikon i grafik.<\/p>\n\n\n\n Warto mie\u0107 na uwadze, \u017ce makiety prezentujemy zazwyczaj w jednej rozdzielczo\u015bci. Oznacza to, \u017ce aplikacja nie b\u0119dzie tak wygl\u0105da\u0107 na wszystkich urz\u0105dzeniach. Nawet kolory mog\u0105 wy\u015bwietla\u0107 si\u0119 w r\u00f3\u017cny spos\u00f3b, na r\u00f3\u017cnych typach ekran\u00f3w.<\/p>\n\n\n\n Projektowanie to ewidentnie jeden z najwa\u017cniejszych krok\u00f3w w tworzeniu projekt\u00f3w. Warto mie\u0107 to na uwadze i w miar\u0119 mo\u017cliwo\u015bci po\u015bwi\u0119ci\u0107 na ten etap wystarczaj\u0105co du\u017co czasu. Dobry projekt UX i UI to istotny element wp\u0142ywaj\u0105cy na p\u00f3\u017aniejszy sukces aplikacji – chocia\u017c nie przewa\u017caj\u0105cy. Nie nastawiamy si\u0119 r\u00f3wnie\u017c na to, \u017ce raz zaprojektowana aplikacja nie b\u0119dzie wymaga\u0142a zmian. Zawsze z ty\u0142u g\u0142owy mamy ryzyko braku 100% przewidywalno\u015bci u\u017cytkownik\u00f3w, a tak\u017ce ci\u0105gle zmieniaj\u0105cych si\u0119 trend\u00f3w oraz wymaga\u0144 systemowych.<\/p>\n","protected":false},"excerpt":{"rendered":" Wst\u0119p Na pocz\u0105tku swojej przygody z projektowaniem us\u0142ysza\u0142am bardzo ciekawe stwierdzenie, \u017ce chocia\u017c to tw\u00f3rcy okre\u015blaj\u0105 przeznaczenie aplikacji to i tak dopiero u\u017cytkownicy wybieraj\u0105 do czego i w jaki spos\u00f3b b\u0119d\u0105 jej u\u017cywa\u0107. Klienci stawiaj\u0105 nam r\u00f3\u017cne wymagania biznesowe. Naszym zadaniem jest przetworzenie ich na przyjazne u\u017cytkownikom. Staramy si\u0119, aby osoby kt\u00f3re korzysta\u0142y z produktu…<\/p>\n","protected":false},"author":1,"featured_media":3151,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[5],"tags":[],"class_list":{"0":"post-3146","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-news"},"acf":[],"yoast_head":"\n![\"\"](\"\/pl\/wp-content\/uploads\/sites\/5\/2019\/06\/UI-UI-design-content.png\")
Kim jest UX Designer? <\/h2>\n\n\n\n
Kim jest UI Designer?<\/h3>\n\n\n\n
\u015awiat UX<\/h2>\n\n\n\n
Zbi\u00f3r do\u015bwiadcze\u0144<\/h3>\n\n\n\n
Nie ka\u017c my\u015ble\u0107<\/h3>\n\n\n\n
U\u0142atwiaj<\/h3>\n\n\n\n
– rozwijanych p\u00f3l do wyboru,
– suwak\u00f3w,
– p\u00f3l z podpowiadaniem warto\u015bci,
– automatycznego ustawiania focus\u2019a na danym polu,
– dostosowanej klawiatury, np. numerycznej.<\/p>\n\n\n\nEtapy projektowania<\/h2>\n\n\n\n
Badaj<\/h3>\n\n\n\n
– wywiady z docelowymi u\u017cytkownikami,
– definiowanie potrzeb i problem\u00f3w u\u017cytkownik\u00f3w,
– spisywanie user stories,
– tworzenie person.<\/p>\n\n\n\n![\"\"](\"http:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/06\/Research-phase-1024x228-1024x228.png\")
<\/figure>\n\n\n\nPrototypuj<\/h3>\n\n\n\n
![\"\"](\"http:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/06\/prototyp.png\")
<\/figure>\n\n\n\nTestuj<\/h3>\n\n\n\n
Dobre UI<\/h2>\n\n\n\n
![\"\"](\"http:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/06\/Good-UI-1024x585-1024x585.png\")
<\/figure>\n\n\n\nProstota i minimalizm<\/h3>\n\n\n\n
– skalowalno\u015b\u0107 – tworzymy grafiki wektorowo, pracujemy na obiektach inteligentnych (grafiki wektorowe sprawdzaj\u0105 si\u0119 g\u0142\u00f3wnie na systemach Android, mo\u017cliwe jest r\u00f3wnie\u017c dostarczanie tych grafik w formacie .pdf dla systemu iOS<\/a> – je\u015bli jest to nieefektywne – patrz punkt nast\u0119pny),
– dostarczamy zestawy grafik – np. jedna ikona w kilku rozdzielczo\u015bciach.<\/p>\n\n\n\nWykorzystywanie Standard\u00f3w<\/h3>\n\n\n\n
Narz\u0119dzia i prezentacja<\/h3>\n\n\n\n
– Adobe Photoshop,
– Sketch,
– Adobe Illustrator.
Dodatkowo korzystamy z narz\u0119dzia InVision, kt\u00f3re pozwala nam na zaprezentowanie gotowych makiet dla Klienta.<\/p>\n\n\n\nPodsumowanie<\/h2>\n\n\n\n