Utrzymanie spójności w projekcie interfejsu użytkownika

Spójność w projektowaniu interfejsu użytkownika to stara szkoła i nieco zapomniana w niektórych współczesnych projektach internetowych i aplikacyjnych. Wygląda na to, że projektanci decydują się na pominięcie spójności w swoich interfejsach.

W przypadku projektowania aplikacji mobilnych niektórzy projektanci decydują się na ponowne wynalezienie, odtworzenie, a nawet całkowite przerwanie standardowych interakcji sprzętowych za pomocą własnych unikalnych wzorców interfejsu. Łamanie spójności między regułami sprzętowymi interfejsu użytkownika a wrażeniami z aplikacji może nie być złym pomysłem, ale łamanie spójności własnych aplikacji może być.

Trzy kroki do spójnego projektu interfejsu użytkownika

Istnieją trzy rodzaje spójności, o których należy pamiętać przy projektowaniu aplikacji internetowych i mobilnych:

• 1. Zachowaj spójność z wytycznymi i zachowaniem interfejsu użytkownika urządzenia
• 2. Zachowaj spójność z innymi podobnymi witrynami lub aplikacjami
• 3. Zachowaj spójność z własnym projektem

Na potrzeby tego artykułu chciałbym skupić się bardziej na trzecim - zachowując spójność we własnym interfejsie użytkownika. Jest to coś wielkiego, głównie dlatego, że nie chcesz mylić ani zaskakiwać użytkowników wewnątrz własnej aplikacji.

Nie chcesz, aby użytkownik przechodził ze strony głównej do podstrony i widział różne style, a nawet bardzo różne interakcje użytkownika. Tego rodzaju rzeczy mogą zaskoczyć użytkowników, a w niektórych przypadkach nawet ich odstraszyć. Spójność jest nie tylko istotną kwestią dla ogólnej użyteczności witryny, ale może również znacznie zwiększyć konwersję.

Spójna struktura i interakcje

Jest to klucz do stworzenia spójnego interfejsu użytkownika. Czasami, gdy się rozwijamy, zapominamy o tym, jak struktura i interakcja wpłyną na ogólne wrażenia użytkownika. Ale podobnie jak projektowanie i tworzenie planów jest ważne przy budowaniu domu lub budynku, tak samo ważne jest tworzenie spójnego, użytecznego interfejsu użytkownika. Jest kilka rzeczy do przemyślenia i planowania przed rozpoczęciem pisania kodu.

• 1. Zastanów się, jak konsekwentnie umieszczać elementy w całej witrynie lub aplikacji.
• 2. Zastanów się, jakich wzorców interfejsu użytkownika będziesz używać.
• 3. Zaplanuj, jakie elementy wejściowe będą potrzebne.
• 4. Sprawdź, jakich ikon potrzebujesz, i wybierz lub zaprojektuj dobry zestaw ikon, który obejmie je wszystkie.

Umieszczenie elementów to ogromny sposób na ograniczenie zaskoczenia użytkownika i stworzenie spójnych, wiarygodnych oczekiwań. Trzymaj nawigację w tym samym miejscu, nic nie irytuje użytkownika szybciej niż przenoszenie lub znikanie elementów nawigacyjnych. Zachowaj także logo i inne elementy marki w tych samych lokalizacjach na całej stronie.

„Nic nie drażni użytkownika szybciej niż przenoszenie lub znikanie elementów nawigacyjnych”

Jeśli używasz paska bocznego, nie wstrząśnij nim zbytnio, zmieniając zawartość stron na stronie. Niektóre z nich mogą być istotne dla treści na stronie, ale należy unikać usuwania, a nawet przenoszenia importowanych ogólnych elementów, takich jak formularze wyszukiwania. Jedną wielką rzeczą, którą należy konsekwentnie utrzymywać, są linki lub przyciski logowania i ustawień użytkownika.

Rozważ wzorce interfejsu użytkownika

Zaplanuj z wyprzedzeniem i zastanów się, jakie wzorce interfejsu użytkownika będą potrzebne. Czy potrzebujesz galerii? Moduły? Akordeony? Paski boczne? Planowanie wzorców projektowych z wyprzedzeniem nie tylko pomoże Ci szybciej opracować i zaprojektować aplikację, ale również zastanowienie się, jakie wzorce projektowe będą Ci potrzebne, pomoże również zorientować się w treści z wyprzedzeniem - co może również zaoszczędzić mnóstwo czasu.

To również rozwiąże problemy i odpowie na pytania z wyprzedzeniem, w ten sposób, gdy przejdziesz do sekcji lub strony w witrynie, która wymaga decyzji w interfejsie użytkownika, już to zrobiłeś i nie zostaniesz przyłapany na tworzeniu pomieszania wzorców projektowych w całej witrynie.

Pomyśl również o swoich formularzach. Zaplanuj, jakie elementy formularza będą potrzebne i wymień elementy, których nie będziesz potrzebować lub które możesz wymienić. Elementy formularza mogą być przerażające lub nawet trudne dla użytkowników do nawigacji, więc jeśli możesz wyeliminować lub zamienić niektóre dane wejściowe, które mogą być przeszkodami, zrób to.

„Jeśli możesz wyeliminować lub zamienić niektóre dane, które mogą być przeszkodami, zrób to.”

Jest to również świetny sposób na usunięcie decyzji z procesu programowania. Utrzymanie spójności formularzy zarówno pod względem stylu, struktury, jak i interakcji może czasem spowodować lub przerwać współczynnik konwersji.

Ponownie zaplanuj głowę. Zaplanuj z wyprzedzeniem, jakie ikony będą Ci potrzebne. Jednym z bardzo szybkich sposobów na poprawienie spójności jest przejście do połowy rozwoju aplikacji, gdy odkryjesz, że potrzebujesz ikon do drukowania, a następnie uświadomisz sobie, że nie pamiętasz, skąd masz ikony, a nawet czy możesz znajdź ikonę wydruku pasującą do reszty twoich ikon.

To nie jest nawet kwestia stylu, ale interaktywny. Użytkownicy przyzwyczają się do wyglądu poszczególnych ikon i będą mogli szybko je rozpoznać. Ale jeśli używasz patchworkowego zestawu ikon, zdezorientujesz użytkownika, a nawet utrudnisz mu określenie, co oznaczają niektóre ikony.

Spójny styl

Styl i konstrukcja każdego elementu interfejsu użytkownika jest ważna, a zachowanie spójności między nimi jest również ważne dla użytkownika. Tak jak ważne jest, aby mieć spójne zestaw ikon, ważne jest, aby Twoja aplikacja była spójna pod względem projektowym. Możesz pomyśleć, że niektóre przyciski są fajne, nawet jeśli nie są zbliżone do ogólnego wyglądu lub schematu kolorów witryny, ale to po prostu wprowadzi użytkownika w błąd i będzie wyglądać brzydko.

Projektując zestaw interfejsu użytkownika, należy pamiętać o kilku rzeczach, aby uzyskać spójność:

• 1. Kolorystyka
• 2. Styl
• 3. Granice
• 4. Rodzaj i czcionki
• 5. Rozmiar
• 6. Obrazy tła
• 7. Efekty

Zabarwienie

Jak powiedziałem wcześniej, zachowaj kolor interfejsu użytkownika zgodny z ogólną kolorystyką witryny. Nawet przy projektowaniu wezwania do działania, w którym chcesz, aby przyciski wyróżniały się i były zauważane, uważaj, aby nie uczynić swojego wezwania do działania brzydkim komplementem w stosunku do wszystkich kolorów. Aby Ci pomóc, użyj narzędzi takich jak Kuler lub ColorSchemer, aby pomóc w wyborze kolorów, które pasują do siebie.

Kiedy mówię o utrzymaniu spójnego stylu, mówię o tym, aby nie używać jakiegoś szalonego przycisku gradientu z kroplami cienia i fazy, jeśli reszta projektu witryny jest płaska i nie ma na niej cienia ani gradientu. Oprócz zachowania spójności z ogólnym projektem witryny, pozostań spójny ze stylem elementów interfejsu użytkownika. Jeśli używasz określonego koloru lub stylu czcionki na etykietach wejściowych, trzymaj się go i używaj go na wszystkich etykietach.

Granice

Ahh, granice. Zbyt często widzę strony, które używają trzech lub czterech różnych grubości obramowania przycisków lub promieni i to może być naprawdę mylące. Zachowaj wszystkie granice przycisków, danych wejściowych, zaznaczeń, galerii, obrazów i wszystkich innych elementów interfejsu użytkownika spójnych ze sobą. Nie oznacza to, że musisz użyć na promieniu obramowania, możesz go pomieszać, mając kilka wartości, a nawet konsekwentnie stosować jeden styl na każdym elemencie.

Rodzaj i czcionki

Używanie tego samego typu i czcionek w elementach jest bardzo ważną rzeczą, szczególnie w przypadku elementów formularza. Zachowaj spójność nagłówków i nie używaj wielu czcionek, nawet jeśli wszystkie Ci się podobają - możesz zapisać je dla innych projektów. Wejścia i przyciski powinny mieć style czcionek, które pasują do siebie lub uzupełniają, aby formularze były łatwe do odczytania i przewidywalne.

Rozmiar

Rozmiar czcionek i innych elementów powinien być spójny lub komplementarny względem siebie. Nagłówki i tytuł stron powinny pozostać spójne, aby użytkownik wiedział, że te wiersze tekstu w rzeczywistości pasują do nagłówków i tytułów. Spójny rozmiar dotyczy również każdego elementu interfejsu użytkownika z obszarów treści, łączy, elementów nawigacyjnych lub pasków bocznych. Unikaj zmieniania ich rozmiarów, aby drastycznie między widokami stron, aby użytkownik mógł je rozpoznać natychmiast po załadowaniu strony.

Obrazy tła

Staraj się nie zmieniać zbyt mocno obrazów tła. W dzisiejszych czasach nie zdarza się to często, ale nadal warto unikać zmiany obrazów tła z widoku strony na widok strony. Jeśli tak, postaraj się, aby obraz był w jakiś sposób powiązany ze sobą, aby strony nie straciły spójności. Zmiana obrazu tła, szczególnie dużego, może sprawić, że strona będzie się rozłączać i sprawi, że użytkownik poczuje się tak, jakby nawet całkowicie ją opuścił, więc naprawdę staraj się unikać tej pokusy.

Efekty

Efekty, przede wszystkim efekty świetlne, mogą sprawić, że coś, co wygląda na świetny projekt strony, nie ma sensu dla użytkownika. Na przykład, jeśli używasz podświetlenia na przycisku, który wygląda tak, jakby świeciło na nim światło, zastosuj ten sam efekt świetlny dla fazowanego tekstu w przyciskach lub fazowanych tekstów.

Szczerze mówiąc, tak naprawdę nie jest to wielki przerób lub zepsuć umowę z użytkownikiem, ale dla wybrednego widza mogą zauważyć niespójność twoich efektów i odwrócić uwagę od robienia tego, co mają zrobić z aplikacją lub witryną.

Nie bądź nudny

Projektowanie pod kątem spójności może czasem wydawać się przyziemne, a nawet nudne, a możesz po prostu rzucić coś w projekt, aby zaskoczyć użytkownika, i to naprawdę świetnie.

Dobrze jest trzymać użytkowników na nogach, jsut nie wstrząsają tak bardzo, że stają się tak zniechęceni lub zdezorientowani, że odchodzą i idą gdzie indziej. Mała konsekwencja może przejść długą drogę.