Łatwo przyswajalne wskazówki dla programistów [zamknięty]

Jakie są najważniejsze wskazówki dotyczące projektowania interfejsu użytkownika, które powinien znać każdy programista?

Chociaż istnieje wiele zasobów interfejsu użytkownika dla programistów (na przykład projekt interfejsu użytkownika Joela Spolsky ' ego dla programistów), jestem zainteresowany bardziej listą punktorów, które można przekazać na 1 do 2 stronach.

Interesują mnie bardziej taktyczne, codzienne porady UI , w przeciwieństwie do nadrzędnych celów projektowania UI, które byłyby uwzględnione w spotkaniu projektowym UI (prawdopodobnie w którym uczestniczyli co najmniej jedna osoba z dobrym wyczuciem UI). Zbiór tych wskazówek może obejmować około 80% przypadków, na które natknie się codzienny programista.
Author: David Koelle, 2008-11-12

19 answers

  • Użyj standardowego paska menu(amatorzy projektanci GUI wydają się lubić wykresować własny kurs tutaj z jakiegoś powodu). Upewnij się, że pierwsze elementy To Plik, Edycja i widok, a ostatnie to Help
  • nie martw się o motywy kolorystyczne lub skórki; trzymaj się standardowego wyglądu, który jest zgodny z Twoją platformą
  • Użyj domyślnej czcionki systemowej
  • Użyj akceleratorów menu, które są zgodne z Twoją platformą
  • trzymaj się sprawdzonego i prawdziwego układu z paskiem menu na górze, statusem pasek na dole, a w razie potrzeby panel nawigacji po lewej
  • nigdy nie chwytaj całego systemu
  • Jeśli masz wybór, Zmień rozmiar wszystkich okien.
  • Użyj grup radiobuttonów dla "wybierz dokładnie jeden". Zawsze upewnij się, że jeden z nich jest domyślnie zaznaczony. Jeśli chcesz, aby użytkownik nie mógł wybrać żadnego, Dodaj inny radiobutton dla "no choice"
  • Użyj grup przycisków dla "wybierz zero lub więcej"
  • w razie potrzeby ogranicz wprowadzanie danych (np. nie-cyfry w polu wprowadzania liczb) zamiast czekać na użytkownika, aby wprowadzić dane, przesłać, a następnie wyrzucić okno dialogowe z napisem " Hej, litery nie są dozwolone!". Jeśli nie są dozwolone, nie przyjmuj ich w pierwszej kolejności.
  • Bądź liberalny w tym, co akceptujesz jako wkład. Na litość boską, nie rzucaj dopasowania do pola SSN, jeśli pominą myślniki, lub włożyć, gdy ich nie chcesz. Komputer jest inteligentny, niech się zorientuje, że xxxxxxxxx i xxx xx xxxx i xxx-xx-xxxx są ważne społeczne numery bezpieczeństwa.
  • Zawsze zezwalaj na spacje w długich polach, takich jak numery seryjne i inne. Jakość danych wzrasta, jeśli użytkownik może grupować liczby w zestawy po trzy lub cztery. Jeśli twój model danych nie może obsłużyć spacji, możesz je usunąć przed zapisaniem danych.
  • unikaj wyskakujących okien dialogowych, takich jak plaga. Nigdy nie pokazuj go, chyba że absolutnie musisz. Jeśli zdecydujesz, że musisz, zatrzymaj się i przemyśl swój projekt przed kontynuacją. Są czasy, kiedy są one konieczne, ale te czasy są znacznie rzadsze niż można sobie wyobrazić.
  • zwróć uwagę na przesuwanie klawiatury. Większość zestawów narzędzi próbuje to zrobić dobrze, ale zawsze sprawdzaj podwójnie. Użycie powinno być w stanie użyć klawisza tab, aby przemierzać widżety w logiczny sposób.
Wszystkie te zasady można oczywiście złamać. Ale złamać go tylko wtedy, gdy łamiesz go z uzasadnionego powodu.

Pamiętaj, że oprogramowanie jest po to, aby pomóc użytkownikowi, powinno robić to, czego chcą oni , zamiast zmuszać ich do robienia tego, czego ona chce.

 31
Author: Bryan Oakley,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-07 22:07:35

Kiedy masz zamiar wykonać akcję, która zmieni lub usunie informacje, nie pytaj "czy jesteś pewien" - użytkownicy nauczą się klikać przycisk w ramach akcji. Spróbuj zezwolić na "cofnięcie" w projekcie systemu.

 11
Author: Alister Bulman,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-11-12 18:48:01

Dokonaj domyślnego wyboru, z którego większość użytkowników byłaby zadowolona.

 8
Author: PotatoEngineer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-11-12 19:00:18

Zawsze daj użytkownikowi "wyjście" z dowolnego miejsca, które nie wymaga użycia przycisku Wstecz.

Najlepszy przykład:

Jeśli wystąpi błąd, daj im link z powrotem do miejsca, w którym byli (lub przynajmniej do miejsca, w którym mogą zacząć od nowa).

 7
Author: Jeffrey Harrington,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-11-12 18:50:12

Używaj wskazówek jak najwięcej. To niesamowite, jak ci mali faceci mogą dodać dużą pomoc użytkownikowi końcowemu i są dyskretni dla samej aplikacji.

 6
Author: Dillie-O,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-11-12 19:11:52
  1. zapytaj użytkownika, nie wymyślaj rzeczy
  2. uprość-Usuń krok, wyeliminuj kliknięcia itp.
  3. zapoznaj się z zasadami usability
 4
Author: Steven A. Lowe,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-11-12 18:42:45

Myślę, że ten link byłby dobrym punktem wyjścia, od Microsoft " Windows Vista User Experience Guidelines:
http://msdn.microsoft.com/en-us/library/aa511328.aspx

A to może być bardzo zbliżone do dwuostronicowej listy punktowej, której szukasz: "Top Violations":
http://msdn.microsoft.com/en-us/library/aa511331.aspx

Bardzo przyziemne wskazówki, takie jak: "Ustaw minimalny rozmiar okna, jeśli istnieje rozmiar, poniżej którego zawartość nie jest już użyteczny."

 4
Author: Corey Trager,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-11-12 18:57:26

Poprawne tabulatory są koniecznością.

 4
Author: utku_karatas,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-11-12 19:02:49

Podczas projektowania interfejsu użytkownika Zrób to tak proste, jak to możliwe, ale nie prostsze.

 4
Author: BoltBait,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-11-12 19:13:06

Nie zwiększaj "wykrywalności" kosztem podstawowej przejrzystości i użyteczności.

 3
Author: Larsenal,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-11-12 19:08:52

Znajdź to, co użytkownik będzie robił najczęściej, a następnie uczyń to najprostszą rzeczą do zrobienia.

Na przykład: mam długoletnie doświadczenie w projektowaniu mikrofalówek.

Wiele z nich wymaga ustawienia zegara, którego nigdy nie używasz przed użyciem kuchenki mikrofalowej, i zapomina za każdym razem, gdy traci moc i wymaga 10 naciśnięć klawiszy na tych trudnych w użyciu przyciskach, aby to zrobić.

Prosty test użyteczności sprawdziłby najczęściej używany czas gotowania na mikrofale to standardowa "minuta" i ich wielokrotność. Idealna kuchenka mikrofalowa powinna więc być w stanie gotować produkt przez 1 minutę przy dużej mocy w 3 lub mniej działaniach.

Dla czasów poza minutą, ale w ciągu 5 minut od złotej " 1 " minuty, powinno być nieco więcej kroków, ale nie tak znacząco, i tylko znacząca liczba czynności wymaganych dla czasu gotowania > 5 minut. (które są raczej rzadkie)


2 Przykłady wspaniałej konstrukcji mikrofalowej

1. 4 części. Drzwi, pokrętło temperatury, pokrętło czasu, Sekwencja oświetlenia czasu

Pokrętło temperatury jest Analogowe i utrzymuje się z poprzedniego ustawienia, ze zmiennym zakresem przesuwu.

Pokrętło zegara jest cyfrowe, ale symulowane analogowe, obracając pokrętło w kierunku zgodnym z ruchem wskazówek zegara zwiększa czas zegara (pokazany przez sekwencję oświetlenia pod pokrętłem). Obrócenie tarczy w kierunku przeciwnym do ruchu wskazówek zegara zmniejsza czas zegara. Gotowanie zmniejsza czas zegara.

Drzwi są zamknięte i czas na zegarze zaczyna gotować. Przerwy w otwieraniu drzwi gotowanie.

Standardowa operacja: otwórz drzwi, załaduj, przekręć pokrętło czasowe, zamknij drzwi (lub opcjonalnie najpierw zamknij drzwi, a gotowanie zaczyna się, gdy tylko >1s jest na zegarze)

2. 6 Części, Drzwi, Pokrętło, Przycisk Zasilania, Przycisk Start, Przycisk Wyczyść, Cyfrowy Wyświetlacz Czasu

Przycisk Start bez wybranego czasu rozpoczyna gotowanie przez 1 minutę na dużej mocy.

Przycisk Start podczas gotowania dodaje 1 minutę do czasu.

Wybieranie czasu utrzymuje się pomiędzy sesjami. Obracanie tarczy powoduje skopiowanie czasu zapisanego na pozycji tarczy do cyfrowego timera.

Naciśnięcie "power" przed rozpoczęciem gotowania spowoduje

  1. W przypadku, gdy tarcza nie została obrócona, skopiuj bieżący czas zapisany na pozycji dziennej do cyfrowego timera.
  2. [38]} W przypadku, gdy pokrętło zostało obrócone, zmniejsza wybór poziomu mocy o 1, lub jeśli na najniższym poziomie mocy, powraca do najwyższego.

Moc przyciskania podczas gotowania zmniejsza poziom mocy na mucha.

Standardowa operacja: 1 minuta = naciśnij start .

1 minuta Średnia Wysoka = naciśnij start, naciśnij moc.

2 minuty = naciśnij start dwa razy.

On high = turn dial until happy, press start.

Na przekręć pokrętło do happy, naciśnij power Do happy, naciśnij start.

na high = naciśnij power, naciśnij start

on high = press power, naciśnij start dwa razy.

Jak widać tutaj, dodanie niewielkiej ilości dodatkowych przycisków, może dodać duży stopień ekspresji i funkcjonalności.

Każdy projekt z klawiaturą numeryczną do specyfikacji czasu, zwykle nie spełnia moich kryteriów dobrego projektu.

Jego zauważyć, że te projekty mogą, dla niektórych ludzi mają wyższą krzywą uczenia się, ale raz nauczony, pamięć mięśni sprawia, że instynktowne. W przeciwieństwie do bardziej (oczywistych? ) ale zbyt skomplikowane konstrukcje, które nawet uczony użytkownik będzie wielokrotnie musiał spędzać żmudne ilości czasu wykonując żmudne arbitralne operacje, po prostu w celu osiągnięcia wspólnych celów.

 3
Author: Kent Fredric,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-11-12 20:12:07

Wykonaj kilka testów użyteczności (w taki sam sposób, jak byś robił recenzje kodu).

Nawet bardzo szybkie "Hej! spróbuj tego " testu użyteczności (jeśli można to tak nazwać) z facetem obok ciebie zrobi dużą różnicę. Najważniejsze jest, aby ktoś inny niż ty wypróbował właśnie zbudowany interfejs użytkownika.

To niesamowite, ile razy inni ludzie utknęli przy użyciu nowego interfejsu użytkownika, a znalezienie największych problemów zajmuje tylko kilka minut.

 2
Author: Wilka,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-11-12 19:38:49

Jeśli używasz wyskakującego okienka z edytora, pamiętaj, aby przywrócić punkt wstawiania lub stan do tego, co było przed wyskakującym okienkiem. Zbyt wiele programów po prostu "wisi" i musi znaleźć drogę powrotną.

 0
Author: Uri,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-11-12 19:18:48

Zamiast dowolnych przycisków "OK" i "Anuluj", które, biorąc pod uwagę kontekst, mogą być niejednoznaczne, a użytkownicy ślepo klikają jeden, przyciski powinny zawierać krótki opis tego, co robią.

[Ok, Please Cancel my subscription ], [ Please do not cancel my subscription ] 

Jest o wiele lepszy niż

Cancel my subscription?
[ OK  ] [ Cancel ] 
[[2]}( tego rodzaju awarie często pojawiają się na dailywtf )
 0
Author: Kent Fredric,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-11-12 19:28:30
  1. zminimalizuj liczbę kliknięć
  2. jednolity wygląd (rozmiar tekstu, przyciski.. i inne kontrole)
  3. zminimalizuj wolne edycje... (np. w adresie... podaj stany w rozwijanym menu...etc etc)
  4. w rozwijanej liście krajów... wymień najpierw kraj zamieszkania...(ilu z was sfrustrowanych, że USA jest wymienione na dole i trzeba przewinąć w dół?)
  5. Ogólne listy rozwijane można zamówić jako wybór użytkownika
  6. Brak pisowni msitake;) w ogóle
  7. Zapłać uwaga na etykietowanie tekstu: dla adresu e-mail (mieć podpis jako e-mail... uwierz mi... widziałem to jako adres e_mail:)
  8. symbol waluty dla kwot. jednolity wyświetlacz cyfr w ilości.. ex: $12.15 ==> $12.15 $10.9 ==> $10.90 9.Pasek postępu / stanu
  9. Etykieta Buddy, aby wskazać pole błędu, zanim użytkownik kliknie przycisk OK / Zapisz (np: dla adresu e-mail, jeśli nie ma"@", nie ma potrzeby czekać, aż użytkownik kliknie OK, a następnie powiedzieć im nieprawidłowy adres e-mail)
  10. unikaj powtarzające się wejścia... (np. opcja Zapamiętaj mnie na ekranie logowania)
  11. Opcja aplikacji globalnej pozwalająca użytkownikowi kontynuować pracę od miejsca przerwania w poprzedniej instancji)
  12. Podczas wyświetlania danych na siatce... opcje filtrowania stylu excel
  13. wartości domyślne dla wejść.

Ludzie...nie krępuj się spłukać dowolny z powyższych punktów z ważnych powodów!!!

 0
Author: user26506,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-11-12 20:29:10

Grandmaw Testing.

To moje określenie na pytanie koncepcyjne: "czy twoja babcia, która nigdy nie używała komputera poza mailem i sprawdzaniem www.cutecats.com, użyć?(Zakładając, że ma prawdziwą wiedzę, aby korzystać z tej konkretnej aplikacji)".

Wszystko, co powszechne, powinno być oczywiste; nic nie powinno być magią czarnej skrzynki z efektami ubocznymi. Niecodzienne rzeczy powinny być dostępne we wspólnym formacie, z którego użytkownik korzystał wcześniej.

Wyczyść etykietowanie, Wyczyść drogę do pomocy plik, Wyczyść akcje z wyraźnymi efektami.

Jeśli babcia nie może używać Twojego programu do malowania, musisz naprawdę pomyśleć o swoim interfejsie użytkownika.

 0
Author: Paul Nathan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-11-12 20:38:48

Moją podstawową zasadą projektowania UI jest, aby każda "strona" wykonywała jedno zadanie i tylko jedno zadanie. Utrzymuje proste strony, co zapewnia czystość projektu i sprawia, że aplikacja jest bardziej zrozumiała.

Ten typ konstrukcji nazywa się indukcyjnym interfejsem użytkownika. Oto dokument , który Microsoft opublikował w 2001 roku na ten temat. Tekst może być trochę przestarzały, ale zasady są ogólnie całkiem dobre. Jedynym zastrzeżeniem jest to, że istnieje równowaga w projektowaniu w ten sposób. Jeśli zbyt wiele uproszczeń użytkownicy będą musieli poruszać się po całym miejscu, aby wykonać proste zadania, a zyski z zrozumiałości zostaną utracone na rzecz niedostatecznej produktywności.

 0
Author: NigelTufnel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-11-24 14:54:42

Kilka prostych wskazówek na temat codziennego projektowania interfejsu użytkownika i projektowania aplikacji:

  • użyj prostych szkiców statycznych, aby rozpocząć wstępne plany rozwoju aplikacji internetowych. - Nie pozwól użytkownikom zbyt wiele wyborów. zamiast tego, użyj cater design, aby wysłać użytkownikom ścieżkę, z której skorzystają. - Definiowanie kluczowych grup użytkowników i wykonanych przez nich przejazdów -Ćwicz iteracyjne projektowanie jako część interfejsu użytkownika, aby zapewnić ROI
 0
Author: Alex,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-01-12 20:20:41

Lubię podążać za tymi wskazówkami:

  1. Standard-postępuj zgodnie ze znanymi standardami/wzorami, wykorzystuj ponownie pomysły ze wszystkich produktów, które szanujesz
  2. Simple-Zachowaj swoje rozwiązania proste i łatwe do zmiany (w razie potrzeby)
  3. Elegant-używaj mniej, aby osiągnąć więcej
 0
Author: Zamboni,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-05-04 17:25:34