7 Techniki projektowania interfejsów, aby uprościć i usunąć bałagan z twoich interfejsów
Czym jest prostota? Prostota jest cechą naturalności, prostoty i łatwości zrozumienia. Nie jest więc zaskakujące, że prostota jest często pożądana w projektowaniu interfejsu użytkownika. Większość ludzi w naturalny sposób nie lubi złożoności urządzeń i oprogramowania. Tak, niektórzy ludzie znajdują radość w zastanawianiu się, jak coś działa, ale dla większości z nas niezdolność do obsługi urządzenia prowadzi do zmarnowanego czasu i frustracji, a to nie jest dobre.
Jeśli możesz wziąć złożone urządzenie lub oprogramowanie i jakoś zmienić, przeorganizować i przeprojektować interfejs, aby był łatwy w obsłudze i zrozumieniu, jesteś na dobrej drodze do zapewnienia lepszego komfortu użytkowania .
W tym artykule omówię 7 praktycznych technik , które można wykorzystać w projektowaniu stron internetowych, aby uczynić twoje witryny lub aplikacje internetowe prostszymi i mniej zagraconymi.
1. Okna modalne.
Jestem pewna, że pamiętasz czasy, zanim blokery wyskakujących okienek zostały wprowadzone do przeglądarek internetowych, kiedy musiałeś walczyć z mnóstwem małych okien, które zbyt często decydowały się pojawiać w górnej części okna przeglądarki, pozornie z wyłącznym cel irytujący cię. Nikt nie lubił tych wyskakujących okienek i wprowadzono technologie blokujące je. Ale dzisiaj widzimy nowy rodzaj wyskakujących okienek w Internecie, które są o wiele czystsze i działają o wiele lepiej w zamierzonym celu. Są to okna modalne.
Okna modalne są jak okna wyskakujące, ale zamiast pojawiać się w osobnym oknie przeglądarki, pojawiają się bezpośrednio w bieżącym, nad treścią. Okna modalne wymagają interakcji, aby kontynuować, więc poniższa treść jest zwykle zaciemniona, aby to wskazać, a także aby zablokować rozpraszający hałas treści i przesunąć wizualne skupienie na powyższym oknie .
Dlaczego więc korzystasz z modalnych okien i jak upraszczają twój interfejs? Cóż, jeśli spojrzysz na alternatywę, ich cel staje się o wiele jaśniejszy. Alternatywą do używania czegoś takiego jak okno modalne jest zwykle załadowanie nowej strony. Na przykład niektóre witryny mają stronę ustawień Twojego konta. Gdy klikniesz link ustawień, przejdziesz na nową stronę. Ale co, jeśli było tylko kilka opcji ustawień - czy naprawdę warto przekierować użytkownika na nową stronę?
W wielu przypadkach takie rzeczy jak ustawienia, pola edycji i formularze logowania mogą być wyświetlane w oknie modalnym nad treścią. To oszczędza użytkownikowi podróży powrotnej na inną stronę . Zmniejsza obciążenie serwera WWW, ponieważ ma do czynienia z mniejszą liczbą żądań.
ActionMethod , aplikacja do zarządzania projektami, wyświetla modalne okna w całej aplikacji. Oto formularz Appreciation.
2. Ustaw wskaźnik myszy.
Nałożenie mniejszej ilości rzeczy na talerzu ułatwiłoby również połknięcie naczynia. Jeśli aplikacja ma wiele opcji kontrolnych, użytkownicy będą musieli przeskanować większość z nich, aby znaleźć to, czego szukają. Możliwe, że niektóre elementy sterowania są mniej ważne niż inne, a niektóre elementy sterowania są używane znacznie rzadziej niż inne . Najprostszą rzeczą, jaką możesz zrobić, to schować i ukryć te kontrolki z domyślnego widoku.
Sprytnym sposobem na to jest ukrycie kontrolek, a następnie wyświetlenie ich, gdy użytkownik unosi się nad niektórymi obszarami. Są to formanty hover. Na przykład Twitter, popularna aplikacja do mikroblogowania, wyświetla informacje o tym, co ostatnio powiedzieli wszyscy na Twojej liście obserwowanych. Każda wiadomość jest hermetyzowana we własnym małym okienku. W każdej wiadomości możesz wykonać dwie akcje: dodaj ją do ulubionych lub odpowiedz na nią.
Wyświetlanie przycisków ulubionych i odpowiadających na wszystkich wiadomościach prowadzi do bałaganu. Prawdopodobnie nie chcesz odpowiadać na każdą wiadomość w kanale, a jeszcze rzadziej chcesz dodawać wszystkie do ulubionych. Tak więc Twitter wyświetla tylko formanty we właściwym kontekście - po najechaniu kursorem na wiadomość. Prowadzi to do prostszego interfejsu i bez utraty funkcjonalności . Istnieje niebezpieczeństwo, że nowi użytkownicy nie zauważą tych kontrolek, gdy są ukryte; jednak wiele osób ma tendencję do patrzenia na rzeczy, na które patrzy, więc biorąc pod uwagę, że obszary najechania są wystarczająco duże, te elementy mogą zostać szybko wykryte.
Świergot pokazuje przyciski dodawania do ulubionych i odpowiadania dla każdej wiadomości po najechaniu na nią kursorem.
3. Kontrola na żądanie.
Innym sposobem ukrywania rzeczy jest użycie Javascript i wyświetlenie zestawu kontrolek, gdy użytkownik kliknie gdzieś. Na przykład możesz mieć w witrynie pole wyszukiwania, które pozwala na użycie niestandardowych filtrów lub zaawansowanych wyszukiwań. Zamiast domyślnie wyświetlać te opcje, możesz ukryć je i udostępnić za pomocą przycisku na końcu paska wyszukiwania. Kliknięcie tego przycisku może ujawnić zestaw opcji lub filtrów. Oznacza to, że zachowujesz zaawansowaną funkcjonalność dla tych, którzy jej potrzebują, a jednocześnie upraszcza interfejs dla osób, które po prostu potrzebują prostego wyszukiwania.
Nie każdy korzysta z bardziej zaawansowanych lub wyspecjalizowanych mechanizmów kontrolnych w Twojej witrynie. Ukrywając je, czynisz interfejs czystszym i łatwiejszym do zrozumienia, ponieważ nowi użytkownicy mają mniej elementów do przetworzenia i wymyślenia. Wybór tego, co chcesz ukryć, a co zachować, nie jest łatwym zadaniem, a twoim zadaniem jako projektanta jest znalezienie odpowiedniego balansu.
Kontain , aplikacja do blogowania, zapewnia zaawansowane filtry wyszukiwania dla ich wyszukiwania, ukryte w menu rozwijanym na końcu paska wyszukiwania.
4. Rozszerzanie formularzy.
Jestem pewien, że znasz pole przesyłania plików, które często widzimy w formularzach internetowych. Zazwyczaj jest to mały pasek z przyciskiem przeglądania plików obok. Wyobraź sobie sytuację, w której użytkownik może przesłać kilka plików naraz. Możesz wyświetlić kilka pól do przesyłania plików, ale nie jest to idealne rozwiązanie, ponieważ spowoduje zaśmiecenie interfejsu i nie ma możliwości określenia, ile pól będzie potrzebować użytkownik. Doskonałym rozwiązaniem w tym przypadku byłoby zastosowanie rozszerzającej się formy .
Gdy użytkownik prześle jeden plik, pojawi się kolejne pole przesyłania pliku, gotowe do zaakceptowania więcej. Możesz zastosować tę samą technikę dla dowolnego innego pola wejściowego. Na przykład, może ta forma potrzebuje grup adresów e-mail dla osób, które chcesz zaprosić do zespołu lub w innym celu. Zamiast dużej liczby pól tekstowych możesz mieć jedną lub kilka, a gdy użytkownik je zapełni, nowe zostaną utworzone poniżej . Rozszerzenie formularza w ten sposób jest świetnym sposobem na zaoszczędzenie miejsca i uproszczenie interfejsu .
Gmail wyświetla tylko jedno pole załącznika podczas tworzenia nowej wiadomości. Możesz kliknąć link "Dołącz inny plik", aby otworzyć więcej, gdy ich potrzebujesz.
5. Etykiety wewnątrz formularzy wejściowych.
Formularze mogą być szybko złożone. Masz pola tekstowe, etykiety, obszary tekstowe, listy rozwijane, pola wyboru i tak dalej. Co więcej, wypełnianie formularzy zwykle nie jest zabawne, więc przyspieszenie procesu i uproszczenie formularzy sprawi, że będą mniej zniechęcające i łatwiejsze w użyciu. Jedną z technik, które można zastosować, aby formularze wyglądały na prostsze, jest przenoszenie etykiet z zewnątrz obszarów wejściowych do wewnątrz. Zamiast wyświetlać etykietę obok tego pola tekstowego, pokaż ją jako wstępnie wypełnioną wartość w polu tekstowym .
To znacznie zmniejsza przestrzeń, zmniejszając ogólną wielkość formularza. Mniejsze rzeczy wydają się prostsze , więc formularz powinien być łatwiejszy do wypełnienia. Może to nie być możliwe w przypadku bardziej skomplikowanych formularzy, w których masz różne typy danych wejściowych (pola wyboru, przyciski opcji, listy rozwijane), ale jeśli masz kilka pól tekstowych warto rozważyć, np. formularz logowania.
Obecnie istnieje jedna z wad tej metody, którą na szczęście można rozwiązać dzięki dokładniejszemu wdrożeniu. Gdy użytkownik najpierw załaduje stronę, zobaczy pola i będzie mógł odczytać etykiety. Gdy klikną pole, większość formularzy takich jak ta całkowicie ukryje etykietę, umożliwiając użytkownikowi wpisanie ich danych wejściowych. Ale co, jeśli użytkownik przedwcześnie klika na pole, a następnie zapomina, co to jest, że mieli pisać? Może zaistnieć potrzeba kliknięcia poza formularz, aby etykieta pojawiła się ponownie (miejmy nadzieję).
Aby rozwiązać ten problem, zamiast całkowicie ukrywać etykietę, można przyciemnić ją, gdy użytkownik ją kliknie, a następnie całkowicie ukryć, gdy użytkownik zacznie pisać.
MobileMe pokazuje etykiety wewnątrz pól wprowadzania na ekranie logowania, a następnie przyciemnia je po wybraniu pola.
6. Ikony zamiast tekstu.
Aby uzyskać prostotę w projektowaniu interfejsu, musisz zredukować i zabrać wszystkie niepotrzebne lub rzadko używane części . Obejmują one nie tylko kontrolki, ale mogą to być również etykiety tekstowe. Jeśli twój interfejs ma wiele etykiet, spójrz na to i zadaj sobie pytanie - czy wszystkie te etykiety są potrzebne? Czy większość z nich po prostu stwierdza oczywistość? Jeśli etykieta wskazuje coś, co jest oczywiste ze względu na kontekst tego elementu, nie potrzebujesz tej etykiety - jest przestarzała.
Aby dać ci przykład, pomyśl o wpisach na blogu. Pod nagłówkiem każdego posta możesz mieć takie rzeczy jak data i autor. Dołączanie etykiet przed każdym takim jak "Autor:" i "Data:" może nie być potrzebne. Kiedy ktoś widzi nazwisko i datę pod nagłówkiem artykułu, najprawdopodobniej odkryje, że to jest autor i to jest data. Kontekst, a także format, w jakim przyzwyczaili się do czytania innych blogów, daje użytkownikom wszelkie wskazówki, których potrzebują, aby natychmiast zrozumieć znaczenie danych. Pozbycie się tych etykiet zapewni ci czystszy interfejs .
W niektórych przypadkach, w których pominięcie etykiety nie będzie działać, możesz zastąpić etykietę ikoną. Ikona ma pewne zalety w stosunku do etykiety tekstowej. Zajmuje mniej miejsca. Łatwiej jest się skupić, ponieważ jego kolor i wyrazisty kształt przyciągają wzrok łatwiej niż tekst. W niektórych przypadkach znaczenie można przekazać równie skutecznie jak tekst. Na przykład, jeśli masz etykietę o nazwie "Tagi:", a następnie listę linków do tagów, możesz zastąpić etykietę małym obrazkiem tagu. Pod warunkiem, że masz doświadczonych technologicznie odbiorców, znaczenie w tym przypadku powinno pozostać jasne.
Oczywiście nie będzie działać we wszystkich przypadkach, a jeśli istnieje ryzyko, że będzie niejednoznaczny, powinieneś grać bezpiecznie i użyć etykiety tekstowej. Powiedziawszy to, nie ma powodu, aby wybierać tylko jedną lub drugą - możesz czerpać korzyści z atrakcyjnych, przyciągających wzrok właściwości ikon, wraz z klarownością tekstu, używając ich razem; chociaż w takim przypadku będziesz handlować poza przestrzenią.
Highrise , aplikacja CRM, używa ikony znacznika zamiast etykiety tekstowej przed listą znaczników.
7. Kontekstowe elementy sterujące.
Istnieje kilka podejść, które można zastosować w projektowaniu interfejsu, które odnoszą się do kontekstu i spójności. Jeden z nich zakłada, że należy zachować spójność kontroli w aplikacjach lub na stronach internetowych, aby zapewnić, że ludzie wiedzą, gdzie jest wszystko i nie dezorientują się. Inne podejście polega na zmianie kontroli lub nawigacji w oparciu o kontekst każdej strony lub okna. Podejście oparte na kontekście to takie, w którym wyświetlane są tylko rzeczy potrzebne użytkownikowi do wykonania zadania, nad którym pracują w tym konkretnym kontekście.
Dobrą ilustrację tych dwóch podejść można zobaczyć w niedawnym przeprojektowaniu interfejsu Microsoft Office. Pakiet Office 2003, podobnie jak starsze rodzeństwo, spełniał zasadę zachowania spójności. Przez cały czas wyświetlano na ekranie kilka pasków narzędzi, które nie uległy zmianie, niezależnie od tego, czy pracujesz z tabelami, grafiką, tekstem czy obrazami. Firma Microsoft przeprojektowała ten interfejs dla pakietu Office 2007 przy użyciu podejścia kontekstowego. U góry widzisz teraz wstążkę - lub zestaw kart. Po wybraniu ta zakładka wyświetla zestaw kontrolek odpowiednich do danego zadania , czy to korekta, praca z grafiką, czy po prostu pisanie.
Podejście oparte na kontekście pozwala ci pokazywać mniej kontroli w danym momencie, ale jednocześnie więcej kontroli, które są istotne dla danego zadania . Nie polecałbym korzystania z kontekstowego podejścia do ogólnego projektowania stron internetowych, ponieważ w przypadku większości stron internetowych ludzie oczekują spójnej nawigacji w całej witrynie. Wynika to z faktu, że każda witryna jest inna i znacznie utrudniłoby to przeglądanie stron indywidualnych w różnych witrynach.
Powiedziawszy to, można to wykorzystać w aplikacjach internetowych, ponieważ nie są to tylko proste strony internetowe - są to fragmenty oprogramowania, które znajdują się w chmurze. Ludzie prawdopodobnie spędzą dużo czasu w aplikacji internetowej i będą mieli więcej okazji, aby dowiedzieć się, jak to działa . Złożoność niektórych aplikacji internetowych oznacza, że naprawdę trzeba korzystać z podejścia opartego na kontekście, ponieważ w przeciwnym razie na danym ekranie będzie zbyt dużo czasu, aby ktokolwiek mógł go przetworzyć. Pokazując tylko kilka odpowiednich kontrolek dla danego zadania, użytkownicy mogą dowiedzieć się, co robić w znacznie krótszym czasie.
Pieg , aplikacja do śledzenia czasu, ma przełącznik na górze głównego paska narzędzi. Przełącza pomiędzy kontrolami wprowadzania czasu i kontrolek raportów, wyświetlając tylko jeden zestaw naraz. Ma to sens, ponieważ podajesz czas lub raport - nie dwie rzeczy w tym samym czasie.
Podsumowując…
"Najprostszym sposobem na osiągnięcie prostoty jest przemyślana redukcja" - John Maeda, Prawa prostoty .
Zmniejszając interfejs, ukrywając zaawansowaną funkcjonalność i eliminując oczywiste, jest ścieżka do prostszego interfejsu . Wzdłuż tej ścieżki napotkasz wiele przeszkód. Za każdą funkcję, którą ukrywasz lub zabierasz, będą ludzie, którzy narzekają i żądają, abyś ją zwrócił. Ale każdy z Twoich użytkowników ma inne potrzeby i używa Twojej aplikacji lub strony internetowej w inny sposób. Jeśli wysłuchasz wszystkich żądań i potrzeb związanych z funkcjami, a także zajmiesz się ich realizacją i wszystkimi, prawdopodobnie nie dojdziesz do zenitu projektowania oprogramowania. Bardziej prawdopodobne jest to, że wpadniesz w głęboki dół, z którego prawie nie da się wyjść.
Po dodaniu funkcji bardzo trudno jest ją usunąć, ponieważ ludzie zaczną jej używać, a niektórzy będą od niej zależni. Z tego powodu upewnij się, że każda funkcja i każdy dodany element interfejsu ma sens i dodaje rzeczywistą wartość do Twojego produktu . Więcej funkcji oznacza więcej kontroli i treści. Więcej elementów sterujących i zawartości utrudnia uproszczenie interfejsu i pozbycie się go.
Prostota polega na zredukowaniu i reorganizacji kompleksu na małe i łatwe w zarządzaniu. Jeśli cokolwiek chcesz, powinieneś raczej dążyć do tego, aby odjąć, niż dodawać. Produkt z mniejszą ilością przycisków niekoniecznie jest mniej wydajny - prawdopodobnie jest lepiej zaprojektowany .
Napisany wyłącznie dla WDD przez Dmitrija Fadejewa. Prowadzi bloga na temat użyteczności o nazwie Stan użyteczności .
Czy korzystasz z którejś z tych technik w swoich projektach? Czy uważasz, że pomagają one użytkownikom? Podziel się z nami swoimi doświadczeniami.