Najlepsze praktyki projektowania interfejsu użytkownika i typowe błędy

Posłuchaj wersji audio tego artykułu

Choć tytuł UI designer sugeruje odejście od tradycyjnego grafika, UI design nadal jest częścią historycznej tradycji dyscypliny projektowania wizualnego.

Z każdym ruchem lub medium dyscyplina wprowadza nowe języki graficzne, układy i procesy projektowania. Między pokoleniami projektant przechodził od prasy do kserokopiarki lub od papieru do piksela. Przez te pokolenia projektowanie graficzne odpowiadało za reprezentowanie języka wizualnego każdej epoki.

Kiedy projektowanie interfejsu użytkownika wyjdzie z początków, jakiego rodzaju graficznego świata możemy się spodziewać? W oparciu o obecną trajektorię przyszłość wygląda ponuro. Znaczna część dzisiejszego projektowania interfejsu użytkownika stała się ustandaryzowana i powtarzalna. Projektuj dyskusje online skupiają się na uczeniu się zasad, aby projekty działały bezpiecznie, zamiast przesuwać koperty lub wyobrażać sobie nowe rzeczy.

Tendencja projektantów UI do uciekania się do wzorców i trendów nie tylko stworzyła mdłe środowisko wizualne, ale także zmniejszyła wartość projektanta, ponieważ procesy stają się coraz bardziej schematyczne.

Przeglądając najlepsze praktyki interfejsu użytkownika i typowe błędy, najbardziej palącym problemem nie jest biegłość techniczna, ale unikanie ataku powtarzających się i nudnych wizualnie projektów.

Pięć najczęstszych błędów projektowania interfejsu użytkownika to:

1. Projektanci interfejsu użytkownika mają obsesję na punkcie zasad.
2. Siatka ogranicza proces twórczy projektantów interfejsu użytkownika.
3. Projekt interfejsu użytkownika został ustandaryzowany za pomocą wzorców.
4. Kroje pisma są tragicznie źle rozumiane.
5. Kontrast nie jest lekarstwem na wszystko.

Powszechny błąd nr 1: projektanci interfejsu użytkownika mają obsesję na punkcie zasad

Świat projektowania graficznego zawsze kierował się zbiorami zasad i standardów. W obrębie dyscyplin projektowych, często popełniane błędy ściśle pokrywają się ze standardową zasadą, która została złamana. Z tej perspektywy zasady projektowania wydają się być wiarygodnymi przewodnikami.

Jednak w każdej dziedzinie projektowania nowe ruchy i kreatywne innowacje wynikały ze świadomego łamania zasad. Jest to możliwe, ponieważ projekt jest warunkowy i wymaga dyskrecji projektanta. Projektowanie nie jest procesem z skończonymi odpowiedziami. Dlatego zasady projektowania należy traktować jako wytyczne, a nie zimne, twarde fakty. Doświadczony projektant zna i szanuje księgę zasad na tyle, by móc wyrwać się z pudełka.

Sposób, w jaki projekt jest omawiany w Internecie, często obraca się wokół listy nakazów i zakazów. Opanuj 10 prostych kroków do perfekcyjnego projektowania! Niestety, projektowanie wymaga znacznie solidniejszego zrozumienia zasad i tendencji. Droga do dobrego projektu nie prowadzi przez systematyczne przestrzeganie list kontrolnych.

Co ciekawe, jeśli projektanci przestaną łamać zasady, nie można dokonać twórczych przełomów. Jeśli projektanci interfejsu użytkownika rozwiną tylko umiejętność przestrzegania wytycznych, zamiast doskonalić swoje umiejętności podejmowania decyzji, mogą szybko stać się nieistotne. Jak inaczej będziemy argumentować, że nasza praca wnosi większą wartość niż gotowe szablony?

Uważaj na „10 najlepszych” zasad projektowania

Problem z zasadami projektowania w dzisiejszym świecie projektowania interfejsu użytkownika polega na ich obfitości. Jeśli projektanci muszą rozwiązywać problemy, mogą po prostu spojrzeć na istniejącą społeczność UI i zestaw rozwiązań. Jednak obfitość tych przewodników i zasad podważa ich wiarygodność.

Wyszukiwanie w Google hasła „Najlepsze błędy w projektowaniu interfejsu użytkownika” daje pół miliona wyników. Jakie są szanse, że większość, jeśli w ogóle, z tych autorów zgadza się ze sobą? Jakie jest prawdopodobieństwo, że każda oferowana wskazówka projektowa dokładnie pokrywa się z problemami projektowymi czytelnika?

Często w internetowych artykułach edukacyjnych omawiane są poważne problemy, a nie przewodnie zasady projektowania kryjące się za danym problemem. W rezultacie nowi projektanci nigdy nie dowiadują się, dlaczego projektowanie działa tak, jak działa. Zamiast tego stają się zależne od tego, co było wcześniej. Czy to nie jest problem, że tak niewiele z tych artykułów zachęca do eksperymentów projektowych lub zabawy?

Projektanci powinni raczej korzystać z zestawu narzędzi z zasadami przewodnimi niż z księgi z góry ustalonych reguł i szablonów projektowych. „Naciśnij x, aby przewijać paralaksy, a y, aby wyświetlić karuzele. Zanim wybierzesz, zapoznaj się z najnowszym postem na blogu, w którym popularne jest narzędzie nawigacyjne”. Nudy-!

Wskazówki i listy „Top 10” podążają za przewidywalnymi trendami

Trendy są dla projektantów jak śmieciowe jedzenie. Podążanie za nimi tworzy tanie rozwiązania, które oferują pewien początkowy zwrot, ale niewielką wartość na dłuższą metę. Podążający za trendami projektanci szybko się umawiają. Nagroda za podążanie cudzą ścieżką projektową? Dręczące poczucie zawodowej pustki.

To prawda, że ​​praca nad wymyślaniem własnych stylów i systemów to ciężka praca, ale jest to absolutnie warte wysiłku. Codzienne zyski i przełomy należą do Ciebie. W kopiowaniu jest coś, co wydaje się nigdy nie karmić duszy projektanta.

Powszechny błąd nr 2: siatka ogranicza proces twórczy projektantów interfejsu użytkownika

Pomimo mojej tyrady przeciwko regułom, oto jedno: projektant interfejsu użytkownika nie może pracować bez siatki. Interfejsy internetowe i mobilne są zasadniczo oparte na organizacji piksel po pikselu — nie da się tego obejść.

Nie oznacza to jednak, że projektanci interfejsu użytkownika powinni dążyć tylko do wyglądu zorientowanego na siatkę. Podobnie nie ma powodu, aby wszystkie decyzje projektowe opierały się na siatce.

Unikaj używania siatki jako modnego narzędzia

Generalnie projektowanie w odpowiedzi na trendy skutkuje kiepskim wzornictwem. W najlepszym przypadku trendy prowadzą do zadowalających wyników, ale ogólny wpływ jest prawie na pewno rozczarowujący. Być modnym to być zwyczajnym.

Dlatego stosując siatkę w projekcie, zrozum, co ma ona do zaoferowania jako narzędzie i co może przekazywać. Siatki ogólnie reprezentują neutralność, ponieważ wszystko w granicach siatki wydaje się równe.

Siatki pozwalają również na bezstronne wrażenia nawigacyjne. Użytkownicy mogą przeskakiwać od elementu do elementu bez ingerencji kuratorskiej ręki projektanta. W przypadku innych struktur nawigacyjnych projektant może być w stanie bardziej celowo grupować treści i ustalać pożądane sekwencje.

Nie używaj domyślnej siatki jako przepływu pracy

Dylan Fracareta, wykładowca Rhode Island School of Design (RISD) i dyrektor magazynu PIN-UP, wskazuje, że „większość ludzi zaczyna od siatki 12-kolumnowej… ponieważ można uzyskać z tego 3 i 4”. Niebezpieczeństwo polega na tym, że projektanci natychmiast z góry określają swoją pracę.

Aby temu zapobiec, Fracareta używa narzędzia do przesuwania tylko z określonymi wartościami, w przeciwieństwie do fizycznego umieszczania rzeczy na linii siatki. Daje to podwójny efekt ustanawiania porządku i otwierania potencjału na nieoczekiwane rezultaty.

Kiedyś projektowanie dla przeglądarki oznaczało, że wpisywaliśmy kod i czekaliśmy, aby zobaczyć, co się stanie. Obecnie projektowanie stron internetowych jest podobne do tradycyjnego projektowania layoutu, w którym proces przypomina „bardziej dopasowanie dwóch arkuszy przezroczystego papieru”. Jak my, jako projektanci, możemy skorzystać z tego procesu?

Chociaż siatki mogą być restrykcyjne, są jedną z naszych najbardziej tradycyjnych form organizacji. Siatka jest intuicyjna. Siatka jest neutralna i skromna. Siatki pozwalają treściom mówić za siebie, a użytkownikom łatwo poruszać się po interfejsie. Pomimo moich ostrzeżeń dotyczących restrykcyjności siatek, różne tablice pozwalają na różne poziomy prowadzenia lub swobody.

Powszechny błąd nr 3: projektowanie interfejsu użytkownika zostało ustandaryzowane za pomocą wzorców

Koncepcja znormalizowanych elementów projektowych poprzedza projektowanie interfejsu użytkownika. Detale architektoniczne były od wieków powtarzane i stosowane w podobnych okolicznościach projektowych. Ta praktyka ma sens w przypadku części budynku, które ludzie rzadko dostrzegają.

Jednak gdy architekci ustandaryzowali wspólne elementy, takie jak wymiary mebli i wysokość poręczy, ludzie zaczęli wyrażać brak zainteresowania beżowym środowiskiem fizycznym, które zaowocowało.

Nie tylko to, ale też znormalizowane wymiary okazały się nieskuteczne. Opierając się na średnich statystycznych, często nie służyły one dużym segmentom populacji. Powtarzalne detale mają swoje miejsce, ale nie należy ich używać bezkrytycznie.

Projektanci nie powinni używać wzorów jako produktów

Wielu projektantów interfejsu użytkownika postrzega wzorce jako coś większego niż proste narzędzie oszczędzające czas. Postrzegają je jako gotowe rozwiązania skomplikowanych problemów projektowych. Wzorce mają na celu standaryzację powtarzających się zadań i artefaktów w celu ułatwienia pracy projektanta. Niestety pewne wzorce, takie jak karuzele, paginacja i wzorce F, stały się całą strukturą wielu naszych interfejsów.

Czy użycie wzoru jest uzasadnione?

Projektanci mówią sobie, że wzór F istnieje w wyniku sposobu, w jaki ludzie czytają w Internecie. Espen Brunborg zwraca uwagę, że być może ludzie czytają w ten sposób w wyniku nadużywania przez nas wzorca F. „Jaki jest sens zatrudniania projektantów stron internetowych, jeśli wszystko, co robią, to przestrzeganie przepisu?” — pyta Brunborg.

Powszechny błąd nr 4: kroje pisma są tragicznie źle rozumiane

Wiele list projektowych „Szybkich porad” sugeruje twarde i szybkie zasady dotyczące czcionek. Każda zasada jest wykrzykiwana religijnie: „Tylko jedna rodzina czcionek! Czcionki o stałej szerokości są martwe! Za wszelką cenę unikaj cienkich czcionek!” To nic innego jak gorące powietrze.

Jedyne uzasadnione zasady dotyczące typu, tekstu i czcionek skupiają się na egzekwowaniu czytelności i przekazywaniu odpowiedniego znaczenia. Dopóki tekst jest czytelny, mogą istnieć możliwości zastosowania różnych krojów pisma. Projektant interfejsu użytkownika musi wziąć na siebie odpowiedzialność za znajomość historii, zastosowań i intencji projektowych dla każdej czcionki zaimplementowanej w interfejsie.

Czytelność kroju pisma króluje na najwyższym poziomie

Kroje pisma przekazują znaczenie i wpływają na czytelność. Podczas całej dyskusji dotyczącej zasad czytelności na urządzeniach projektanci zapominają, że czcionka ma na celu nasycenie tekstu estetyczną wrażliwością. Czytelność ma kluczowe znaczenie — nie ma co kwestionować — ale to naprawdę powinien być oczywistym celem. W przeciwnym razie, dlaczego mielibyśmy potrzebować czegoś poza Helveticą czy Highway Gothic?

Ważną rzeczą do zapamiętania jest to, że czcionki są zaprojektowane nie tylko z myślą o różnych kontekstach czytelności. Są również niezbędne do przekazywania znaczeń i nadawania tekstom niuansów nastrojów.

Unikanie cienkich czcionek za wszelką cenę jest nierozsądne

Teraz, gdy trend pojawił się i zniknął, powszechna krytyka projektowa opowiada się za całkowitym unikaniem cienkich czcionek. Ale czy potrzebujemy więcej regulacji? Czy celem nie powinno być głębsze zrozumienie zasad projektowania wspierających kroje pisma?

Niektórzy projektanci są przekonani, że cienkie czcionki są nieczytelne lub niewiarygodne między urządzeniami. Uzasadnione punkty. Stanowi to jednak warunek w obecnej dyskusji na temat projektowania interfejsu użytkownika, w którym kroje pisma są rozumiane jedynie jako wybór techniczny dotyczący czytelności. Jeśli czytelność jest jedynym problemem związanym z projektowaniem, dlaczego nie zlikwidować całkowicie cienkich czcionek?

Bardziej holistyczne podejście zaczyna się od zrozumienia, dlaczego cienka czcionka może być korzystna iw jakich kontekstach. Pogrubiony, gruby tekst jest w rzeczywistości znacznie trudniejszy do przeczytania niż tekst cieńszy. Ponieważ jednak pogrubione czcionki mają większą wagę wizualną, są bardziej odpowiednie dla nagłówków lub treści z niewielką ilością tekstu.

Cienkie czcionki często wykorzystują szeryfy, dzięki czemu nadają się do tekstu podstawowego. Jak to? Znaki szeryfowe spływają razem, gdy są oglądane szybko jeden po drugim, dzięki czemu są wygodniejsze podczas długich okresów czytania.

Dodatkowo często wybierane są cienkie czcionki, ponieważ nadają elegancji. Jeśli projektant zostanie zatrudniony do stworzenia interfejsu dla klienta, którego zadaniem jest wyrafinowanie wizualne, trudno byłoby znaleźć cięższy krój pisma do wykonania pracy.

Czcionki wymagają zmian w celu ustanowienia hierarchii

Częstym błędem w projektowaniu interfejsu użytkownika nie jest zapewnienie odpowiedniej zmienności między czcionkami. Zmiana czcionek to dobre narzędzie nawigacyjne, które pomaga ustalić wizualną hierarchię w interfejsie. Ogólnie rzecz biorąc, największe elementy (lub najgrubsze czcionki) są najważniejsze i mają największą wagę wizualną. Znaczenie wizualne pomaga użytkownikom identyfikować nagłówki treści i często używane funkcje.

Zbyt duża zmienność podważa hierarchię

Problem z tym, aby każdy wybór czcionki był wyjątkowy, zwłaszcza gdy interfejs zawiera wiele krojów pisma, polega na tym, że tak naprawdę nic się nie wyróżnia. Jeśli każda czcionka jest inna, użytkownikom trudno jest rozpoznać ważne treści lub ustalić poczucie porządku wizualnego.

Powszechny błąd nr 5: kontrast nie jest lekarstwem na wszystko

Wspólny wątek, który pojawia się na wielu listach „najważniejszych błędów”, zachęca projektantów interfejsu użytkownika do unikania interfejsów o niskim kontraście. To prawda, że ​​w wielu przypadkach projekty o niskim kontraście są nieczytelne i nieefektywne. Jednak martwię się, podobnie jak w przypadku cienkich czcionek, że użycie języka absolutnego prowadzi do jednorodnej kultury projektowania o wysokim kontraście.

Przestawienie się na wysoki kontrast jest nieostrożne

Obrazy o wysokim kontraście są niezaprzeczalnie stymulujące i ekscytujące. Jest jednak wiele innych stanów, które warto przekazać w ludzkim zakresie emocjonalnym. Stymulacja wizualna może być również wizualnie bezpieczna.

Weźmy na przykład całą branżę współczesnego filmu science fiction. Wygląda na to, że każda produkcja ucieka się do czarno-neonowoniebieskich wizualizacji jako sposobu na oszukanie widzów. Czy nie byłoby bardziej efektywne przeplatanie narracji zarówno obrazami o wysokim, jak i niskim kontraście, które wywołują szerszy zakres reakcji emocjonalnych?

Funkcjonalnie, jeśli każdy element w interfejsie jest w dużym kontraście z innym, nic się nie wyróżnia. To niweczy potencjalną wartość kontrastu jako narzędzia hierarchicznego. Rozważanie różnych ruchów projektowych jako narzędzi, a nie zasad, jest niezbędne, aby uniknąć stagnacji, modnego projektowania.

Wniosek

W najlepszym razie zasady projektowania są wskazówkami. Zapewniają bezpieczeństwo podejmowania decyzji i ostrzegają projektantów przed niebezpieczeństwem bezmyślnych wyborów.

I odwrotnie, zasady projektowania nie są prawami. Nie są niezniszczalne iz pewnością nie zasługują na nasze niekwestionowane poddanie się. W rzeczywistości zasady projektowania, jeśli są przestrzegane lekkomyślnie, mogą stać się poważnymi kulami, które osłabiają naszą zdolność do kreatywnego rozwiązywania problemów.

Projektanci nie są naukowcami. Nie jesteśmy zobowiązani do przedstawiania dowodów empirycznych dla każdej podejmowanej przez nas decyzji estetycznej. To prawda, że ​​nasz zawód to proces i świadomy osąd, ale jest miejsce na instynkt i pomysłowość. W rzeczywistości nasza zdolność pomagania naszym klientom wyróżniać się w zagraconym świecie modnych treści zależy od naszej chęci wyobrażenia sobie nowych możliwości.

Musimy eksperymentować. Musimy grać.

Istnieją zasady projektowania, które można wykorzystać w celu uzyskania przewagi wizualnej. Mogą być wygięte, a nawet złamane, ale nigdy nie należy ich ślepo podążać.