3 C interfejsów użytkownika: kolor, kontrast i treść

Istnieje stary model biznesowy, w którym żyje wielu strategów biznesowych - 3 Cs. Przypomnienie o skupieniu się na firmie, klientach i konkurentach . Wiele małych firm i stron internetowych również korzysta z tego modelu. Ale dla projektantów trzy C są nieco inne.

Tworząc interfejsy użytkownika, powinieneś skupić się na kolorze, kontraście i treści. Te trzy elementy są podstawą dobrego projektu. Ale każdy z nich jest nieco bardziej złożony, niż mogłoby się wydawać z powierzchni. Oto, jak pomyśleć o trzech C interfejsów użytkownika i włączyć je do swoich projektów.

Przeglądaj zasoby projektowe

Kolor

Kolor jest jednym z najbardziej oczywistych elementów wizualnych dla większości użytkowników. Projektanci i osoby niebędące projektantami mogą rozmawiać o kolorze i tym, czy przemawia do nich określony odcień lub paleta.

Kolor może tworzyć odrębne emocjonalne połączenia całkowicie samodzielnie, bez innych efektów. Możesz przekazać próbkę koloru lub chip prawie każdemu i uzyskać reakcję na dowolny widoczny kolor. Jest to również zabawny element projektu, ponieważ preferencje osobiste i projektowe zmieniają się w czasie prawie uniwersalnie.

Kolor może stworzyć lub zepsuć projekt z wielu powodów, ale przede wszystkim robi tak wiele rzeczy i zapewnia użytkownikowi tak wiele wskazówek wizualnych jednocześnie, że nie można go zignorować.

Wpływy kolorów:

• Użyteczność i czytelność
• Rozpoznanie i świadomość marki
• Gdzie użytkownicy wyglądają i wchodzą w interakcje
• Organizacja i przepływ użytkowników
• Ogólny sukces projektu

Użyj koloru, aby utworzyć:

• Nawigacja, która jest przejrzysta i zrozumiała
• Intuicyjne interakcje
• Nastrój do projektu
• Twórz silne wezwania do działania lub użyteczne elementy
• Dowiedz się, o co chodzi w tym projekcie, na przykład rzeczywistość kontra fantazja

To wszystko może wydawać się wysokim zamówieniem na coś tak prostego jak połączenie czerwieni, zieleni i niebieskiego.

Więc od czego zaczynasz? Prawdopodobnie najważniejszymi zmiennymi, jeśli chodzi o kolor, jest tworzenie palety, która angażuje użytkowników i mówi o tym, o czym jest projekt (np. Branding i nastrój). Na przykład witryna Coca-Coli, w której dominującym kolorem był niebieski, a nie czerwony, byłaby dla użytkowników drażniąca.

Stała paleta kolorów jest zakorzeniona w zasadach teorii kolorów.

Stała paleta kolorów jest zakorzeniona w zasadach teorii kolorów. Aby działało, potrzebujesz nie więcej niż kilku kolorów. Wystarczą dwa do trzech kolorów i dobra biblioteka jaśniejszych i ciemniejszych odmian. Mockplus zaleca zasadę 6: 3: 1: wybierz trzy kolory dla palety, w tym dominujący kolor, który jest używany przez 60 procent czasu, drugi kolor, który jest używany przez 30 procent czasu i kolor akcentujący, który może być w pozostałych 10 procent projektu. Zasada jest zakorzeniona w złotym współczynniku, stanowiącym podstawę teorii projektowania i może być świetnym punktem wyjścia.

Oto jeszcze jedna zasada tworzenia palet kolorów w interfejsach użytkownika: zacznij od czerni i bieli. Jeśli projekt nadaje się do użytku bez koloru, prawdopodobnie będzie działał po dodaniu koloru. Czarno-biały kontur daje również dobre wyobrażenie o tym, jak wybrać kolory o wystarczającym kontraście (drugie C), aby zwiększyć użyteczność.

Kontrast

Kontrast tworzy rozróżnienie między elementami. Pomaga stworzyć hierarchię wizualną, skanowalność i przyczynia się do tego, jak łatwo jest szybko zrozumieć. Elementy o silnym kontraście ułatwiają użytkownikowi patrzenie od jednej rzeczy do drugiej, tworząc naturalny wizualny wzór i przepływ użytkownika.

Kontrast jest tak ważny dla projektowania interfejsu użytkownika, że ​​jest częścią wszystkiego, co robisz. Sposób tworzenia kontrastu różni się w zależności od rodzaju zastosowanego elementu efektu wizualnego.

Możesz ustawić kontrast za pomocą:

• Kolor
• Rozmiar
• Kierunek
• Przestrzeń
• Kształt

Kluczowym elementem wytycznych dotyczących dostępności jest kontrast, ponieważ zapewnia, że ​​użytkownicy mogą odróżnić jeden element od drugiego w projekcie. Projekt A11Y, którego celem jest ułatwienie dostępu do sieci, ma następującą rekomendację: zacznij od kontrastu kolorów, używając kolorów z różnych segmentów koła kolorów lub kontrastujących kolorów. Pamiętaj, że kolory uzupełniające - przeciwieństwa na kole kolorów - zapewniają maksymalny kontrast.

Ta sama koncepcja dotyczy również tworzenia kontrastu między innymi elementami. Wybierz kroje pisma z różnych rodzin lub użyj drastycznie różnych rozmiarów, aby pomóc użytkownikom w szybkim czytaniu słów.

Krótko mówiąc, idea stojąca za kontrastem polega na tym, że przeciwieństwa się przyciągają.

Użyj znaków kierunkowych, strzałek lub obrazów z ruchem, aby zmusić użytkownika do patrzenia w określonym kierunku, a następnie odwróć wskazówkę kierunkową, aby uzyskać jeszcze większy kontrast.

Różnica między ciasną a otwartą przestrzenią tworzy duży kontrast. Jeśli chcesz mieć pewność, że Twój tekst jest dobrze widoczny i czytelny, daj mu trochę więcej miejsca na zwrócenie na niego uwagi.

Krótko mówiąc, idea stojąca za kontrastem polega na tym, że przeciwieństwa się przyciągają. Pozornie różne elementy mogą faktycznie ze sobą współpracować, dzięki czemu oba są łatwo widoczne na pierwszy rzut oka.

Aby wiedzieć, czy kontrast działa w zamierzony sposób, zastanów się nad kilkoma czynnikami, patrząc na elementy na ekranie:

• Czytelność: Czy wszystkie słowa i obrazy są dobrze widoczne i czytelne?
• Jasność: czy łatwo jest odróżnić jeden element od drugiego?
• Dostępność: czy działa dla jak największej liczby osób?
• Środowisko: czy użytkownicy mogą zobaczyć i zrozumieć projekt w miejscach, w których będzie on używany?

Zadowolony

Ostatni z trzech Cs jest zadowolony. Projekt interfejsu użytkownika może być tak dobry, jak zawarte w nim informacje. Treść obejmuje wszystko, od obrazów po tekst, ilustracje i ikony, logo i znaki firmowe. Treść obejmuje także wideo i każdą kopię od pełnego przesyłania wiadomości lub narracji, poprzez posty na blogu, aż po małe fragmenty mikro-kopii.

Sama treść nie wystarczy. Musisz mieć gwiazdową zawartość.

Wszystkie te elementy składają się na opowieść o tym, co wyróżnia Twój projekt i interfejs użytkownika. Dlaczego użytkownicy powinni poświęcać czas, a nie robić coś innego?

A samo posiadanie treści nie wystarczy. Musisz mieć gwiazdową zawartość. Treści w wysokiej rozdzielczości. Treści o wysokiej wartości. Twoje treści muszą być lepsze / większe / bardziej specjalne niż podobne treści konkurujące o uwagę użytkowników.

Może to być wysokie zamówienie, ale większość projektantów może tworzyć te treści, zachowując wierność sobie, swojej marce i komunikatom. Trzymaj się tego, kim jesteś i co wiesz. Użytkownicy zobaczą tę autentyczność i, mam nadzieję, docenią ją, spędzając czas z twoim projektem.

Wniosek

Teraz, gdy jesteś uzbrojony w stare trzy C biznesu - firmy, klientów i konkurentów - oraz trzy C projektowania interfejsu użytkownika - kolor, kontrast i treść - masz narzędzia i wiedzę, aby stworzyć projekt nie z tego świata dobrze. (Lub przynajmniej wysoce użyteczny.)

Pracując nad obiema strategiami w projektach projektowych, musisz zastanowić się, jak stworzyć coś, co przyniesie korzyść właścicielowi witryny i użytkownikowi. Tworzysz nie tylko po to, aby projekt był piękny, ale także by był funkcjonalny.

Uwaga: wszystkie przykłady w tym artykule pochodzą z Galerii Design Shack. Rozejrzyj się; jest pełen wspaniałej pracy i inspiracji.