Nie przejmuj się kolejnością przycisków w aplikację internetową, zrób to zamiast tego

(4 czerwca 2019 r.)

Więc projektujesz aplikację internetową. Jaka powinna być twoja kolejność przycisków? Oto kilka wskazówek, jak zdecydować, jaka powinna być kolejność przycisków. Poza tymi przypadkami nie ma to znaczenia, jeśli będziesz postępować zgodnie z poniższymi wskazówkami.

Na początek, abyśmy wszyscy byli na tej samej stronie, zaklasyfikujmy przyciski jako główne i drugorzędne. W większości kontekstów działania podstawowe to działania pozytywne, takie jak Zapisz lub Prześlij, a działania drugorzędne to działania negatywne, takie jak Anuluj lub Usuń.

Postępuj zgodnie z wytycznymi platformy

Jeśli tworzysz pulpit lub w aplikacji mobilnej odpowiedź na kolejność przycisków jest prosta – postępuj zgodnie z wytycznymi platformy.

W przypadku komputera PC oznacza to akcję podstawową, po której następuje akcja drugorzędna.

Na Macu oznacza to działanie drugorzędne, po którym następuje akcja podstawowa.

W przypadku Androida oznacza to dodatkową akcję, po której następuje również akcja podstawowa.

To było łatwe. Ale jaką kolejność przycisków wybierasz dla aplikacji internetowej?

Kolejność przycisków dla aplikacji internetowych

Jeśli projektujesz aplikację internetową, która zapewnia usługę dla użytkowników pojedynczej platformy , nie trzeba się zastanawiać – ponownie postępuj zgodnie z konwencją tej platformy.

Jeśli nie, sprawy trochę się skomplikują. Użytkownicy korzystają z komputerów stacjonarnych, tabletów i telefonów komórkowych. Możesz mieć użytkowników komputerów PC, którzy używają iPhoneów lub Androidów, i możesz mieć użytkowników komputerów Mac, którzy… no cóż, prawdopodobnie używają iPhoneów częściej niż Androidów. Tak, udział w rynku systemów iOS, Android i OSX do Windows wynosi obecnie około 60–40, ale nie oznacza to, że optymalizujesz dla 60% użytkowników, a nie dla pozostałych 40%. Dlaczego nie zoptymalizować pod kątem 100% użytkowników?

Kolejność przycisków nie ma znaczenia, jeśli to zrobisz – przyciski z kontrastem kształtu i rozmiaru

Możesz zoptymalizować dla 100% użytkowników, nie koncentrując się wcale na kolejności przycisków. Możesz śmiało wybrać dowolną kolejność. Zamiast tego skoncentruj się na kontraście wizualnym nie tylko w wymiarze koloru, ale także kształtu i rozmiaru.

Gdy podstawową czynnością jest zwykły przycisk, a drugorzędną tekst (podkreślenie jest opcjonalne, ale z mojego doświadczenia wynika, że ​​sprzedaję ten styl właścicielom produktów lepiej), udaje ci się skutecznie stworzyć wystarczający kontrast, aby użytkownicy mogli łatwo zauważyć różnicę między przyciskiem głównym i dodatkowym.

Nie W przeciwieństwie do zwykłych przycisków, które mają ten sam kształt i rozmiar, i można je rozróżnić tylko kolorem. Poniżej znajdują się przykłady obu zamówień, które są równie skuteczne, ponieważ pozwalają użytkownikom na rozróżnienie między działaniami podstawowymi i drugorzędnymi.

Jak przekształcić zwykłe przyciski w przyciski z kontrastem w kształcie i rozmiarze

Jeśli masz system projektowania, zaktualizuj główne i dodatkowe przyciski aplikacji ze zwykłych przycisków (pod warunkiem, że są umieszczone obok siebie i nie są rozstawione na biegunach) kontrastowe przyciski o kształcie i rozmiarze nie są wcale trudne. Powinien być również łatwy do sprzedania właścicielowi produktu lub radzie ds. Systemu projektowania przedsiębiorstwa, ponieważ można je aktualizować bez martwienia się o pozycjonowanie. To samo dotyczy aktualizowania CSS, jeśli tworzysz sieć. Możesz praktycznie zamienić przyciski w swoim systemie ze zwykłych przycisków na przyciski o kontrastowych kształtach i rozmiarze, nie martwiąc się o nic.

  1. Powiedzmy, że jedna z tych par to Twoje oryginalne przyciski.

2. Zmień kolor tekstu przycisku dodatkowego.

3. Przesuń je obok siebie, aby się stykały.

3. Usuń kształt tła dla przycisku dodatkowego

4. Opcjonalnie, choć zalecane; podkreśl tekst dodatkowego przycisku.

Dziękujemy za przeczytanie.

Zapraszam do kontaktu lub pozostania w kontakcie na LinkedIn i Twitter .

Przeczytaj więcej o UX, pobierz zasoby UX i uzyskaj niesamowite cytaty, które możesz wykorzystać w codziennej pracy UX w Drzewa stożkowe – badania użytkowników & Projekt i Cytaty UX .

A ja jeśli ten artykuł jest dla Ciebie pomocny, klaszcz w dłonie! 👏

Prawa autorskie do zdjęć

Pierwotnie opublikowane pod adresem https://www.conetrees.com 4 czerwca 2019 r.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *