Niedziela, 14 sierpnia 2022

Wzorce projektowe: Jak tworzyć proste interfejsy

19 lipca 2022

Od dawna istnieją wzorce w projektowaniu, które pomagają nam zrozumieć, czego chce użytkownik i jakie rozwiązanie sprawdzi się najlepiej. Są one określane jako wzorce projektowe. Ten artykuł wyjaśni, jak wzorce pomagają nam odpowiednio skonstruować interfejs. Omówimy takie cechy jak przyciski, nawigacja, akordeony i wybór daty na przykładach.

Ten artykuł będzie pomocny zarówno dla nowych, jak i doświadczonych projektantów, którzy chcą dowiedzieć się więcej o tym, jak używać interaktywnych funkcji i kiedy je stosować. Jeśli jesteś w branży dłużej niż rok, będziesz wiedział, że nic nie jest czarno-białe i że w zależności od sytuacji można rozwiązać ten sam problem na wiele sposobów.

Przyciski

Najpierw rozważ następujące pytanie: który z przedstawionych na grafice przycisków jest lepszy?

Pierwszy przycisk dla wielu osób wyda się oczywistym wyborem. Rzeczywiście, jest to dobrze znany wzór, który większość ludzi rozpozna; jest to idealne rozwiązanie dla wielu projektów. Jeśli jednak klienci rozumieją kontekst, mniej przejmują się kształtem; nie ma więc potrzeby, aby projektant myślał w kategoriach stereotypowych. Kontekst lub stany przycisku mogą świadczyć o tym, że jest to przycisk. Gdy na jednej ze stron internetowych umieścimy kursor przy interaktywnej funkcji, zmieni się ona w okrąg. "View" będzie napisane wewnątrz okręgu. W efekcie interfejs będzie mniej zagracony, a Ty będziesz mógł wyraźnie pokazać użytkownikowi, że ma do czynienia z interaktywnym interfejsem.

Następnie, który z tych dwóch przycisków Skip i Sign Up, z których każdy ma wyraźny akcent projektowy, jest lepszy?

Wiele osób najprawdopodobniej zagłosowałoby na pierwszą parę. To było coś, co i ja kiedyś robiłem. Postaw się jednak w roli użytkownika i obserwuj, czego ten interfejs od Ciebie oczekuje. Chcą też, abyśmy zbierali dane przy rejestracji, co podkreślają. Można jednak pominąć ten krok. Czy to jest na miarę możliwości? Tak, ponieważ wielu użytkowników waha się przed rejestracją w serwisie i podaniem danych osobowych. Pokazując tę hierarchię przycisków decydujemy za użytkownika, która akcja jest priorytetowa. Ale dlaczego nie pozwolić im podjąć własnej decyzji? To staje się obecnie coraz bardziej powszechną strategią. Na przykład w Nike widzimy dwa identycznie wypełnione przyciski: Register i Learn more.

Apple w ten sam sposób wykorzystuje przyciski Learn More i Buy. Ten ostatni nie jest dużym czerwonym przyciskiem, który krzyczy: "Kup teraz! Kup teraz!" Użytkownik również może zdecydować, co jest w tej chwili ważniejsze.

I tu pojawia się kolejne pytanie: gdybyś miał do wyboru Cancel i Save, to który postawiłbyś jako pierwszy?

Trudno powiedzieć, czy najpierw powinno być wyświetlane Cancel, czy Save. Załóżmy, że wydaję polecenie. Co jest ważniejsze: posiadanie przycisku w interfejsie dla pożądanej akcji czy zobaczenie wszystkich alternatywnych odpowiedzi i podjęcie decyzji? Projektanci często wybierają drugi wybór, ale jest on nieistotny.

Według badań Nielsen Norman Group zarówno pierwszy, jak i drugi wzorzec są zrozumiałe dla klientów. Android i iOS są tego dwoma przykładami, ponieważ wykorzystują obie metody. Wszystkie mają swój własny zestaw korzyści.

Podoba mi się, jak Apple radzi sobie z tym w macOS. Nacisk kładziony jest na anulowanie akcji, jeśli użytkownik otrzyma nieodwracalne zadanie (takie jak usunięcie danych z kosza). Użytkownik musi w pełni zrozumieć, że nie może odzyskać niczego, co usuwają.

Dlatego podczas pracy z przyciskami wykonaj następujące czynności:

  • Określ zadanie, tzn. jaką akcję skonstruowane przyciski mają skłonić użytkownika do podjęcia.
  • Zobacz, czy możesz zademonstrować, że przycisk jest przyciskiem, patrząc na jego zastosowania w interfejsie lub jego stany.
  • Sprawdź, czy tekst na przyciskach jest czytelny.

Nawigacja

Część dotyczącą nawigacji również rozpocznę od przykładowego pytania. Rozważmy blok nawigacyjny strony i logo (kółko na slajdzie). Czy lepiej umieścić logo na środku nawigacji, czy po lewej stronie?

Obie opcje wydają się być równoważne. Jednak według różnych badań wciąż preferowany jest lewy górny róg. Istnieje wiele wyjaśnień tego stanu rzeczy. Ponieważ czytamy od lewej do prawej, logo jest pierwszą rzeczą, którą widzimy. Jest to również znacznik, który mówi użytkownikowi, skąd przyszedł.

Ośrodek badawczy NNG przeprowadził na ten temat ciekawy eksperyment. Użytkownicy mieli za zadanie zakupić konkretny przedmiot w sklepie internetowym. Jednocześnie na liście nie było żadnych znanych sklepów, tylko lokalne firmy. Loga niektórych witryn znajdowały się po lewej stronie nawigacji, a innych na środku. Towary były kupowane, ale użytkownicy nie mieli pojęcia, co jest przedmiotem próby. Po chwili zostali poproszeni o podanie nazwy firmy, od której kupili towar w internecie. Ludzie lepiej pamiętali zarówno markę, jak i nazwę firmy, gdy logo znajdowało się po lewej stronie. W rezultacie, posiadanie logo po lewej stronie będzie prawdopodobnie znacznie lepsze - szczególnie w przypadku znanych organizacji. Oczywiście nie przeszkadza to wielu stronom internetowym w umieszczaniu swojego logo w środku pola nawigacyjnego.

Rozważmy witrynę, która wyświetla linki do stron w menu w stylu hamburgera. Czy lepiej ukryć całą nawigację w burgerze, czy usunąć część elementów i wyświetlić je użytkownikowi?

Według badań, preferowane jest wyróżnienie części nawigacji. Jeśli wiesz, jakie sekcje użytkownicy odwiedzają w pierwszej kolejności, być może uda Ci się pokazać im te sekcje od razu. Jednak użytkownik musi kliknąć na ikonę i przeszukać obszerną bazę danych w poszukiwaniu konkretnych informacji. Dlatego sensowne jest przyspieszenie tego procesu i natychmiastowe dostarczenie im tego, czego potrzebują.

Dotyczy to nie tylko interfejsów mobilnych, ale również desktopowych. W poniższym przykładzie katalog musi być otwarty niezależnie, aby można było go przeglądać. Kiedy punkt ciężkości uwagi użytkownika przesuwa się, irytuje go to. Jeśli po otwarciu menu wyświetla się lista rozwijana, użytkownicy nie zawsze są wygodni. Następnie musi postępować od lewej do prawej i tak dalej. Dlatego, jeśli to możliwe, preferowane jest wyświetlanie pełnego menu.

Jeśli chodzi o nawigację, nie można pominąć kwestii liczby pozycji w menu. Im mniej opcji ma użytkownik, tym łatwiej jest mu podjąć decyzję. Sugeruje się, że w internecie idealne jest 7-9 rzeczy. Jednak gdy jest dużo sekcji, podkategorii i podkategorii (jak na targowisku), zmieszczenie wszystkiego w minimalnej liczbie pozycji nie zawsze jest wykonalne.

W tym przypadku istnieją różne opcje. Istnieje wiele poziomów menu, które można stworzyć. Przykładem jest strona internetowa New York Timesa. Jest tam nawigacja pozioma i kolejny burger w lewym górnym rogu strony głównej. Po jego kliknięciu pojawia się szerokie menu, z kolejnymi sekcjami na dole i kolejnymi na górze. Uzasadnia to fakt, że New York Times jest ogromnym źródłem informacji. Dlatego projektanci witryny umieścili istotne elementy na poziomie, jednocześnie zaznaczając, że istnieją inne elementy. Dostęp do menu odbywa się za pomocą przycisku w lewym górnym rogu. Jeśli użytkownik jest niezadowolony z głównej nawigacji, takie umieszczenie zwiększa prawdopodobieństwo, że zobaczy menu i kliknie.

Zgodnie z zasadą trzech kliknięć, użytkownik musi dotrzeć do potrzebnych informacji za pomocą trzech kliknięć. Nie ma jednak żadnych danych, które by to potwierdzały. Użytkownicy są dziś skłonni poświęcić znacznie więcej czasu na poszukiwanie informacji. Przykładowo, jeśli szukamy jakiegoś produktu w sklepie internetowym, przeglądamy go do odpowiedniego działu, a następnie drążymy dalej w wielu podkategoriach, aż go znajdziemy. Potem jest jeszcze filtrowanie, sortowanie, dodawanie do porównań, dodawanie do koszyka, kasa, wysyłka itd. Wydaje się, że nie da się tego zmieścić w trzech kliknięciach. W związku z tym nie ograniczaj się do tej wytycznej. Lepiej, aby nawigacja była prosta i oczywista, tak aby użytkownik mógł szybko osiągnąć swoje cele.

Być może mógłbyś podzielić interfejs tak, aby użytkownik wybierał najpierw z 7-9 kategorii, potem kolejne 7-9, potem następne 7-9 i tak dalej, aż dojdzie do końca. Nie należy jednak zbytnio komplikować sprawy, tworząc hierarchię z dziesięcioma lub dwudziestoma poziomami - jest to mało praktyczne. Pięć segmentów katalogu, moim zdaniem, jest całkiem do przyjęcia.

Ale co zrobić, jeśli jest dużo podkategorii i nie można ich sensownie podzielić na 7-9 pozycji? Oto dwie podstawowe strategie, które mogą Ci pomóc: Pierwsza to lista nazwisk w porządku alfabetycznym. Drugą kwestią do rozważenia jest terminologia. Można to zauważyć w przypadku Amazon. Spójrz na ich obszar wystroju domu, który jest zorganizowany alfabetycznie według podkategorii. To sprawia, że znalezienie rzeczy jest znacznie łatwiejsze dla użytkownika. Podstawowym wymogiem jest to, że nazwa jest poprawna i rozpoznawalna dla użytkownika. Nie należy używać żargonu, slangu, ani fachowego słownictwa.

W niektórych miejscach autentycznie podziwiam podejście Amazona. Twórcy umieścili kilka najpopularniejszych podkategorii na górze listy, a następnie puścili resztę w kolejności alfabetycznej. Jest to świetne rozwiązanie problemu, ponieważ pozwala na wyświetlenie w pierwszej kolejności rzeczy najpopularniejszych.

Avic podąża tym samym tropem. Produkty Apple stanowią większość przychodów firmy. W związku z tym rozbijanie lub ukrywanie takich produktów nie ma sensu; zamiast tego są one usuwane z katalogu i przenoszone na górę, co zwiększa liczbę kategorii na stronie głównej. Ponownie wydaje się, że użytkownik będzie miał trudności z podjęciem decyzji. Jeśli jednak Apple jest głównym źródłem przychodów, to logiczne wydaje się, aby od razu wyróżnić tę sekcję.

Rozważane przykłady opierają się na prostej nawigacji. Jednak nie każde zadanie jest takie w praktyce. W niektórych okolicznościach możesz chcieć zrobić coś zupełnie niestandardowego. Na przykład, być może widziałeś stronę internetową dewelopera we Francji, gdzie aby przemieszczać się między sekcjami, musisz używać klawiszy strzałek na klawiaturze, aby prowadzić samochód, który jeździ między pozycjami menu. To rzadkie zjawisko i choć wydaje mi się, że dotyczy nieco innego problemu, to jednak odnosi sukces - a przy okazji generuje środowisko wokół projektu.

Oto kolejny przykład efektownego menu ze strony internetowej Warszawskiego Teatru Lalek. Cała nawigacja odbywa się za pomocą symbolicznych obrazów, które wydają się być na sznurkach i poruszają się, gdy na nie wskazujemy, podobnie jak marionetki. W rezultacie użytkownik staje się bardziej zaangażowany w grę nawigacyjną. Zgodnie z tradycją teatru lalek, podejście to tworzy zachwycającą atmosferę.

Przed rozpoczęciem pracy z nawigacją należy zapoznać się z poniższymi elementami:

  • Czy jest coś, czego nie chcesz, aby było widoczne w serwisie? Jeśli serwis jest ogromny, zastanów się, jak możesz ułatwić użytkownikowi życie: porządek alfabetyczny, umieszczanie najważniejszych rzeczy na początku, konstruowanie wyrafinowanych okruszków chleba, itp.
  • Znajdź sposób na wyświetlenie użytkownikowi, gdzie jest teraz i gdzie może się udać. Jest to krytyczne, ponieważ zawsze powinieneś zaprojektować stany dla wszystkich interaktywnych elementów: normalne, po najechaniu, aktywne, niedostępne i w trakcie ładowania.
  • Określ, czy menu będzie zakotwiczone na górze i co będzie zawierać. Na przykład przełącznik języków najprawdopodobniej znajdzie się w prawym górnym rogu witryny dwujęzycznej. Czy jednak należy usunąć opcję zmiany języka, jeśli odwiedzający zaczął już przewijać stronę w dół?

Akordeon

Przejdźmy teraz do akordeonu. Najpierw przyjrzyjmy się dwóm różnym wersjom tego elementu interfejsu: jednej z szewronem skierowanym w dół i jednej z symbolem plusa. Jak myślisz, która wersja ikony jest lepsza? Następnie pojawia się pytanie, czy ikona powinna być umieszczona po prawej czy po lewej stronie tekstu, niezależnie od jego rodzaju.

Według badań, użytkownicy rozpoznają akordeony i chętniej klikają w tekst. Klikają w ikonę 25% czasu, gdy jest ona po prawej stronie i 75% czasu, gdy tekst jest po lewej stronie. Czy to oznacza, że nie ma potrzeby, aby ikona była po prawej stronie? Nie, umieszczenie jej tam jest całkiem akceptowalne. Tak naprawdę nie ma znaczenia, gdzie ją umieścimy; ważne jest to, że umieścimy ją gdzieś i sprawimy, że będzie wystarczająco duża, aby można było na nią kliknąć.

Jedyna różnica polega na tym, że procedura trwa nieco dłużej, gdy klikamy na ikonę. Dzieje się tak dlatego, że poszczególne osoby celują i starają się dokładnie kliknąć na ikonę. W związku z tym kluczowe jest stworzenie takiego elementu na tyle dużego, aby wygodnie się z nim pracowało. Proponowałbym nawet powiększenie obszaru klikalnego, a nie samej ikony. Do mnie przemawia projekt "Dia", w którym ikony są tak duże jak sam akordeon. Ta strona jest, moim zdaniem, prosta i wygodna dla wszystkich użytkowników. Każda komórka jest klikalna i zajmuje w tym przykładzie całą szerokość ekranu.

Jeśli chodzi o kierunek strzałki, to nie zawsze należy celować nią w prawo. Wielu użytkowników nauczyło się, że skierowanie strzałki w prawo oznacza przejście na inną stronę. W poniższym przykładzie tylko mały obszar, tekst i ikona są klikalne, a na dole znajduje się przycisk ze strzałką, która wskazuje ten sam kierunek, co odpowiednik akordeonu. Jednak działania te są odmienne. Gdy klikniesz akordeon, otworzy on blok w dół, a gdy klikniesz przycisk, zostaniesz przekierowany na inną stronę. Ludzie mogą być tym zakłopotani.

Dając użytkownikowi akordeon bez znaków identyfikacyjnych, podobnie nie jest dobry. Osoba musi wiedzieć, z którym aspektem interfejsu wchodzi w interakcję. Musisz albo użyć ikony, albo zademonstrować, że element jest klikalny. Jedyną rzeczą, która wskazuje na klikalność w powyższym przykładzie jest zmieniający się wygląd kursora po najechaniu na tekst. Nie jest on jednak widoczny, musi być większy lub należy użyć określenia takiego jak "Czytaj". Bez tego użytkownik nie będzie w stanie odróżnić akordeonu od pogrubionego zaznaczenia tekstu.

Jak już wcześniej stwierdziłem, musisz wymyślić wszystkie cechy interaktywne w kategoriach stanów. Jeśli na przykład był pozytyw, to powinien się on zmienić - lub przynajmniej stać się minusem. W efekcie użytkownik zorientuje się, że pole rozwijane może być ukryte.

Jest to niewygodne, gdy ikona znika po kliknięciu. Użytkownik oczekuje, że będzie mógł zamknąć blok dokładnie w tym miejscu, w którym go po raz pierwszy otworzył. W końcu może mu się nie podobać odpowiedź, która się pojawia i może chcieć ją od razu usunąć. Teraz, gdy przycisk został przesunięty, będzie musiał ponownie celować. Oto nietypowy przykład akordeonu plus, który nie jest klikalny. Dotyczy to tylko nawigacji mobilnej. Jeśli użytkownik miał wcześniej do czynienia z wersją desktopową, może nie rozpoznać, co jest nie tak i uwierzyć, że to błąd podczas przełączania się na wersję mobilną.

Wyobraź sobie, że masz za zadanie podjąć decyzję, czy zachować otwarte elementy, czy ukryć je, gdy użytkownik otworzy inne. Z jednej strony, jeśli elementy nie zamykają się, symbol nie będzie się poruszał, ponieważ żadne elementy nie są przekazywane. Z drugiej strony, jeśli jest zbyt dużo tekstu, użytkownik może mieć problem z nawigacją do następnego pytania. W rezultacie może być korzystniejsze automatyczne zamykanie zbędnych bloków. Rozważ jednak liczbę odpowiedzi w konkretnym akordeonie.

Akordeon jest elementem wielofunkcyjnym. Można go wykorzystać nie tylko w obszarze FAQ, ale także na stronie kasy. Według Baymarda, ponad 30% sprzedawców internetowych na całym świecie akceptuje płatności za pomocą kas w stylu akordeonowym, przy czym w Stanach Zjednoczonych odsetek ten jest znacznie wyższy i wynosi 56%.

Takie rozwiązanie ma kilka zalet. Użytkownik może najpierw zobaczyć kolejne kroki do wykonania (powiedzmy, jakie systemy płatności są akceptowane). Nie trzeba nawet klikać "Dalej" ani przechodzić na inną stronę, aby to osiągnąć. Po drugie, akordeon ułatwia nawigację od bloku do bloku w celu sprawdzenia danych bez konieczności przeładowywania strony i ryzyka jej utraty. W końcu, jeśli użytkownik popełnił błąd w pierwszym obszarze i odkrył go w drugim, to tutaj można go łatwo poprawić. W typowej kasie musiałbyś wrócić do poprzedniej strony i ryzykować utratę informacji, które użytkownik wypełnił, ale nie wysłał do serwera.

Możesz również użyć akordeonu do tworzenia menu. W tej sytuacji musisz jednak zachować ostrożność. Kategoria nadrzędna akordeonu w poniższym przykładzie nie ma zawartości. W rezultacie, jeśli wielokrotnie klikniesz elementy, aby zwinąć akordeon, cały obszar zawartości pozostanie pusty. W tej sytuacji dobrym pomysłem jest również umieszczenie jakiejś informacji w tej sekcji strony.

Fantastyczny, piękny akordeon na hover to kolejny przykład. Można go dość mocno dostosować do potrzeb. Chociaż w wersji mobilnej nie ma akordeonu, to w zasadzie są to tylko banery, które przekładają się na inne linki.

Innym bardziej ekstremalnym przykładem stworzonym przez ewidentnych wielbicieli takiego rozwiązania jest akordeon w akordeonie. Za pomocą tych bloków można poruszać się po całej stronie. To niesamowite rozwiązanie.

W interfejsach mobilnych akordeony są również niezbędne w projektowaniu stron. Dzięki nim w prosty sposób można ukryć informacje. Cała nawigacja na stronie The Guardian odbywa się za pomocą tych bloków. Jedyne co mi przeszkadza to fakt, że kategorie nadrzędne nie są klikalne. Użytkownik nie ma wyboru, aby zobaczyć wszystkie wiadomości sportowe. Dostępne są tylko podkategorie "Piłka nożna", "Krykiet", "Rugby" i tak dalej. Z drugiej strony The Guardian przeniósł kategorie nadrzędne na pierwszą stronę, co jest rozsądną odpowiedzią na taki problem.

Z kolei The Wall Street Journal zastosował zupełnie inne podejście. Nie zamieścili kategorii na stronie głównej, a zamiast tego stłoczyli wszystko w jednym bloku. Gdy użytkownik odwiedza kategorię, pojawia się jednak sekcja Main. Pozwala to na nawigację do głównej sekcji nadrzędnej lub konkretnej podkategorii.

Podsumujmy więc akordeon:

  • Zawsze na początku zadaj sobie pytanie, czy naprawdę potrzebujesz akordeonu. W końcu "opłatą" dla użytkownika jest kliknięcie. Czasem można się bez niego obejść i dostarczyć wszystkie informacje od razu.
  • Zastanów się, jakiej ikony użyć. Może to być cokolwiek, ale najważniejsze, żeby była prosta w użyciu.
  • Gdzie powinien być umieszczony symbol? Jest to w dużej mierze zależne od tego, jak wszystko się dostosuje. Na przykład, jeśli masz długą linię, lepiej jest ustawić symbol po lewej stronie. Wtedy nie będziesz musiał się martwić, że ikona zniknie, gdy zwiniesz akordeon w mały blok i przesuniesz tekst do następnej linii.
  • Wybierz, czy wszystkie bloki są domyślnie zamknięte, czy też początkowy blok pozostaje otwarty. Jest to zależne od twojego zadania i celów użytkownika.

Data

Wybór daty jest kolejnym kluczowym czynnikiem, który należy rozważyć przy omawianiu wzorców projektowych. Zacznę od porównania, jak to jest w zwyczaju. Użytkownicy iOS 14, którzy ustawiali czas budzika, będą znali ten scenariusz. Która opcja jest lepsza?

Podoba mi się pierwszy wybór, ponieważ jest bardziej atrakcyjny i nie zniekształca czcionki tak bardzo jak drugi. Pierwszy wariant ma jednak potencjalny problem: trudno go modyfikować i przekręcać. W końcu przestrzeń jest ograniczona, a użytkownik musi dokładnie wpasować się w miejsce. Warto zauważyć, że Apple zdecydowało się pozostawić oba warianty otwarte.

Zastanów się, do czego będziesz używał Date Pickera podczas jego tworzenia: zakres dat do rezerwacji hoteli lub planowania wycieczek, data do ustawienia urodzin lub przypomnienia, data do wskazania godziny seansu filmowego lub do zamówienia taksówki. Będzie to miało wpływ na resztę procesu wyobrażania sobie i projektowania tej funkcji.

Kluczowe, moim zdaniem, jest opisanie wielu sposobów, w jaki użytkownik uzyskuje informacje już teraz. Cztery opcje to kalendarz, bęben (bardziej rozwiązanie mobilne), konwencjonalny obszar wprowadzania danych oraz lista rozwijana. Przyjrzyjmy się kilku odrębnym rozwiązaniom, które wszystkie dotyczą biletów lotniczych. Na przykład Wizz Air wykorzystuje kalendarz, ale podwójny, dzięki czemu klient widzi dwa miesiące jednocześnie.

Ale skoro tak, to jaką datę początkową należy podać? Wydaje się, że powinien to być dzień następny i strona internetowa to pokazuje. Jednak badania wykazały, że użytkownicy nie zawsze są zadowoleni, gdy data została już określona. Ludzie rzadko kupują bilety lotnicze na następny dzień. Dlatego to "domyślne" ustawienie prawie na pewno będzie musiało zostać zmodyfikowane.

Qatar Airlines poszły jeszcze dalej, ogłaszając datę rozpoczęcia i zakończenia programu. Dziś jest pierwszy dzień programu. Czy ten wybór jest wymagany, jeśli użytkownik zaloguje się o 23:58? Drugą kwestią jest brak rozróżnienia pomiędzy datą początkową i końcową oraz wszystkimi dniami pomiędzy nimi. Wszystko jest pomalowane tym samym odcieniem. Użytkownicy chcą widzieć kotwice dla dat, jeśli planują długą podróż, która zaczyna się w jednej lokalizacji i kończy w innej. Ludzie są przyzwyczajeni do tego, że mówi się im, że zaczynamy i kończymy w określonych miejscach. Dzięki temu użytkownik może być pewien, że daty są prawidłowe.

Dziś UIA umieszcza w kalendarzu zarówno datę wyjazdu, jak i powrotu. Ustaliliśmy już, że nie jest to idealne rozwiązanie. Wyzwaniem jest też wybór miejsca docelowego, bo trzeba najpierw kliknąć na liście, potem przejść do rozwijania, wyszukać kraj itd. To długa i kręta droga. Ale, wydaje mi się, że głównym błędem jest coś innego. Dane wyjściowe wyników wyszukiwania są puste. Jeśli wybiorę dwa miejsca docelowe i daty, mogę zostać poinformowany, że to miejsce docelowe nie ma dostępnych lotów. Jeśli przejdę do następnej daty w kalendarzu, nie ma dostępnych lotów. Overbooking to jedyna metoda, aby dowiedzieć się, kiedy przybędą. Prawdopodobnie skorzystam z zewnętrznego agregatora, który prosto i wygodnie zbiera dane z wielu linii lotniczych.

Kalendarz SkyUp jest jednym z moich ulubionych. Zawiera duże pola, które otwierają duży kalendarz, a ustawienie daty rozpoczęcia i zakończenia podróży jest proste. Wskazuje dni, w których nie ma lotów dla danej lokalizacji, i możesz od razu zobaczyć cenę każdego biletu. Jest to dość przydatne, ponieważ pozwala wybrać dzień i lot jeszcze przed kliknięciem potwierdzenia.

Zwróćmy teraz uwagę na bęben. Do takiego elementu można wprowadzić niemal dowolne informacje, w tym czas, datę i inne listy. Użytkownicy mogą łatwo poruszać się po tym narzędziu i przeskakiwać między wartościami.

Pole wejściowe następuje po sobie. Musimy wziąć pod uwagę format, jeśli pozwolimy użytkownikowi wprowadzić datę za pomocą klawiatury. Na przykład w różnych regionach świata "12.10.2021" może być różnie interpretowane: dla jednych może to być 12 października, a dla innych 10 grudnia. Jest to szczególnie istotne w przypadku poniższej przykładowej strony dotyczącej wynajmu samochodu w innym kraju. Użytkownik musi być świadomy, z jakim formatem ma do czynienia. W tej sytuacji kilku ekspertów radzi, aby użytkownik pisał tekstem. Pojawia się jednak kwestia lokalizacji: czy system rozpoznałby, że język nie jest globalnym angielskim, ale raczej bardziej niestandardowym językiem? W końcu użytkownik może używać skrótów podczas pisania. Trzeba albo poinstruować użytkownika, jak ma to robić, albo zastosować inne rozwiązania, np. umieścić obok ikonę kalendarza. W tej metodzie użytkownik kontroluje sposób wprowadzania danych.

Jeśli lista rozwijana jest skromna, np. miesiące, to nie ma w tym nic złego. Jednak z czasem możesz zgromadzić zbyt długą listę. Weźmy pod uwagę stronę internetową Ukrzaliznytsia. Limit czasowy to jedna godzina, a na liście znajdują się 24 pozycje. Być może najlepsze jest tu podejście mieszane, gdzie użytkownik wpisuje kilka cyfr, a następnie wybiera z listy.

Właśnie takie podejście jest stosowane w Kalendarzu Google. Jeśli w polu wprowadzania danych zaczniemy pisać 16, to podopcje pojawią się o 16:00, 16:15, 16:30 i 16:45 (zgodnie z ustawionym przez system krokiem 15 minut).

Podsumujmy jeszcze kalendarze:

  • Tworząc kalendarz pamiętaj, aby ustalić, w jakim formacie będzie data, a także lokalizacja, język oraz jak określić, gdzie będzie dzień i miesiąc.
  • Warto zauważyć, że początek tygodnia różni się w zależności od regionu i osobistych preferencji - w niektórych przypadkach jest to niedziela, a nie poniedziałek.
  • Ustal, czy pola powinny mieć jakąś domyślną wartość, jeśli mają mieć sens dla użytkowników, czy też pozostawić wszystko puste na początku.
  • Zdecyduj, czy niedostępne dni powinny i mogą być pokazane. W niektórych przypadkach mogą tu wystąpić ograniczenia techniczne. Odsyłam do przykładów wymienionych powyżej. SkyUp może nie mieć wielu lotów, a Qatar Airlines ma ich o rząd wielkości więcej. Z tego powodu nie zawsze jest możliwe zaciągnięcie informacji o lotach do kalendarza zanim użytkownik wyśle zapytanie do serwera.
  • Określ, czy kolejny krok wejścia powinien być otwierany automatycznie. Na przykład dla Wizz Air po wypełnieniu daty wylotu pole dla daty końcowej otworzy się automatycznie, natomiast dla UIA trzeba ponownie kliknąć pole dla drugiej daty.
  • Co podać użytkownikowi najpierw: datę czy godzinę? Załóżmy, że chcesz zapisać się na kurs języka angielskiego. Masz określone godziny pracy, a chcesz dotrzeć na zajęcia przed lub po nich, każdy dzień Ci odpowiada. Jaki jest główny cel: pozwolić osobie wpisać godzinę, a następnie pokazać dostępne dni dla danego harmonogramu, czy zrobić inaczej? To rodzi kolejne pytanie: jak pokazać wybrane i niedostępne dni lub inne etykiety? Na przykład w kalendarzu Google wszystko jest dobrze oddzielone kolorowymi tagami: wydarzenia, święta państwowe, zaproszenia na wydarzenia itp. Ale w tym scenariuszu musisz pomyśleć o możliwości stworzenia legendy, która opisuje wszystkie stworzone przez Ciebie tagi.

Pamiętaj: Wzorce projektowe muszą rozwiązywać problemy użytkownika

Jeśli podsumujesz wszystko powyżej, główne zalecenie jest proste: przed zastosowaniem jakichkolwiek wzorców projektowych, upewnij się, że wiesz, jakie zadania powinien wykonać użytkownik i jak je rozwiązać. Na tej podstawie możesz zbudować interfejs z pięknymi i, co ważniejsze, przyjaznymi dla człowieka przyciskami, nawigacją, akordeonami, datami i innymi funkcjami.