Jak rewolucja ekranu dotykowego wpływa na UX
Wprowadzenie systemu Windows 8 spowodowało ogromny przegląd interfejsu użytkownika systemu Windows zgodnie z interfejsem Windows Phone, aby był bardziej intuicyjny dla osób używających ekranów dotykowych, a Apple subtelnie dostosowywał OSX w miarę upływu czasu, upraszczając funkcje, które stają się coraz bardziej udostępniane w swoich mobilnych i stacjonarnych systemach operacyjnych. Podczas gdy jeszcze nie widzieliśmy ekranu dotykowego Maca, oczywiste jest, że rewolucja ekranu dotykowego zbliża się do nas, a użytkownicy spędzają coraz więcej czasu na urządzeniach mobilnych niż na domowych komputerach.
Mając to na uwadze i coraz większą część przeglądania odbywa się na smartfonach i tabletach, strony internetowe muszą decydować, w jaki sposób dostosują się do osób uzyskujących dostęp do ich treści bez użycia myszy i klawiatury. Podczas gdy domyślną odpowiedzią na to było często "stworzenie osobnego interfejsu mobilnego!", Rozwiązanie, które w przeszłości działało dobrze na mniejszych urządzeniach mobilnych, takich jak telefony, jest bardzo mało miejsca dla grupy środkowej zajmowanej przez większy telefon i wyświetlacze tabletu.
W tym artykule przyjrzymy się wielu stronom, które przeszły na niekonwencjonalne i standardowe projekty witryn, aby stały się bardziej przyjazne dla użytkowników.
Skoncentrowane witryny internetowe i responsywne witryny
Wiele witryn tworzy witryny dodatkowe lub aplikacje przeznaczone specjalnie dla użytkowników ekranu dotykowego, aby umożliwić im skupienie się na jednym typie użytkownika naraz. Jednym z problemów jest to, że ponieważ strony internetowe są oddzielne, polegają na przekierowaniu adresów URL, które często może prowadzić do problemów, takich jak wysłanie użytkownika do niewłaściwej witryny z linków lub złe przekierowanie w wyniku potrzeby przekierowania na sformatowane strony dla użytkowników mobilnych.
Największym problemem związanym z oddzielnymi stronami internetowymi dla użytkowników mobilnych jest jednak to, że często wersja mobilna nie posiada funkcji ani informacji, które otrzymuje użytkownik komputera; funkcje i interfejsy często upraszczane, przyciski powiększane i opcje zmniejszane. Można to rozwiązać za pomocą "responsywnego" projektu. Responsywna strona internetowa została zaprojektowana tak, aby była łatwo widoczna na obu platformach bez utraty jakości. Ma to również tę zaletę, że należy zaprojektować tylko jedną stronę internetową, a nie dwie, jednak często powoduje to kompromisy na obu platformach.
Podstawowe różnice projektowe
Istnieją oczywiste różnice między ekranem dotykowym a pulpitem, o którym należy pamiętać podczas tworzenia witryny. Na ekranie dotykowym przesuń palcem w górę strony, aby przewinąć ją w dół, jednak na pulpicie przesuwaj kółko przewijania w dół. Firma Apple próbowała to poprawić, konsolidując technologie interfejsu dotykowego z trackpadami zarówno na laptopach, jak i komputerach Mac, jednak użytkownicy komputerów PC, a nawet użytkownicy komputerów Mac, używający konwencjonalnych kółek przewijania lub suwaków do przewijania stron internetowych, są w gorszej sytuacji.
Przyciski muszą być znacznie większe na urządzeniach mobilnych, ponieważ kliknięcie nie jest tak dokładne jak kliknięcie myszą, nie ma nic bardziej irytującego niż kliknięcie linku na następną stronę i przypadkowe wysłanie z powrotem strony lub reklamy. Brak kursora oznacza również, że nie można podać stanów najechania, aby wyjaśnić, gdzie znajduje się łącze, co oznacza słowo, a nawet, co jest klikalne.
Istnieje również różnica między dokładnością na wejściach ruchomych, ponieważ ekrany dotykowe mogą mieć wejścia rezystancyjne lub pojemnościowe, które mają różną czułość, a następnie dokładność może zostać utracona na rezystancyjnych ekranach dotykowych. Poza tym, projekty muszą zawierać dwie bardzo różniące się rozdzielczości dla urządzeń mobilnych, które mają dwie orientacje.
Orientacja ekranu i współczynnik proporcji
Dzięki wielu rozdzielczościom poza standardowymi rozmiarami monitorów oznacza to, że nie możesz już myśleć tylko w kategoriach standardowych rozdzielczości ekranu i ruchu w pionie. Gwałtowne zmiany na rynku technologii spowodowały, że ekrany różniły się od modelu i producenta, a wraz ze wszystkimi plotkami na temat tzw. Inteligentnych zegarków możemy zacząć oglądać ekrany, które nie są już ograniczone do czterech granic. Ekrany mobilne zwiększają złożoność, ponieważ można je wyświetlać zarówno w trybie pionowym, jak i poziomym, dzięki rotacji.
Odpowiedzią są płynne układy, które dostosowują się do każdej rozdzielczości i mogą być dostosowane zarówno do oglądania w pionie, jak i w krajobrazie. Niektóre witryny używają płynnego układu, który radykalnie zmienia wygląd strony w celu zoptymalizowania łatwości sterowania i wykorzystania pełnego potencjału ekranu w oparciu o jego orientację.
Podczas gdy myszy zostały specjalnie zaprojektowane z kółkami przewijania w celu łatwego przewijania w pionie, wielu użytkowników migruje do touchpadów i ekranów dotykowych, a ponieważ firma Apple przyjęła bardziej innowacyjną formę przewijania dotykowego, która przypomina przeciąganie strony, a nie przewijanie, bardziej kreatywna idea przewijanie w poziomie może nie być wykluczone. Większość aplikacji używa poziomego przewijania jako narzędzia, a zdecydowanie największym sukcesem w przewijaniu poziomym jest kruchość, więc dlaczego nie zaimplementować go w swoim interfejsie internetowym? Wiele stron pojedynczej strony ma wyłącznie oś poziomą, jednak często muszą one używać przycisków w celu zainicjowania przewijania, ponieważ użytkownicy mogą nie rozumieć niestandardowego formatu.
Przesuwanie w poziomie może być podobne do przewijania w pionie pod względem projektowania, jednak użycie obu może otworzyć możliwość przewijania w dwóch osiach, co może nie działać w przeglądarce. Wielu użytkowników lubi być zakotwiczonych na osi, oczywiście jest to zazwyczaj oś X, która jest statyczna, więc jeśli użytkownicy gubią się na stronie, mogą po prostu przewinąć w górę i wrócić do głównej nawigacji. Na stronach z dwiema osiami może to nie być tak proste, więc nawigacja może wymagać lepszej obsługi za pomocą paska stylu HUD.
Jakiego interfejsu użytkownika powinna używać Twoja witryna?
Oczywiście nie każdy interfejs jest odpowiedni dla każdego typu witryny, więc zadaj sobie kilka podstawowych pytań: Kim są Twoi docelowi odbiorcy? Co próbujesz "sprzedać"? Jakie wrażenie chcesz dać? Młodsi ludzie częściej korzystają z ekranów dotykowych niż starsze grupy demograficzne, które prawdopodobnie używają komputera stacjonarnego, ale nadal mogą potrzebować większych przycisków i bardziej przejrzystego interfejsu użytkownika. Nie ma sensu tworzyć najbardziej innowacyjnego interfejsu użytkownika, jaki można sobie wyobrazić, jeśli nikt nie będzie w stanie zrozumieć, jak go używać, więc zawsze pamiętaj o utworzeniu interfejsu użytkownika, na który użytkownik może patrzeć i od razu wie, jak go używać.
Menu promieniowe
Promieniowe menu, znane również jako menu kołowe, jest okrągłym menu kontekstowym, które wykorzystuje wielokierunkowy kontekst, a nie wysokość lub szerokość jako narzędzie wyboru.
Jest to świetna forma intuicyjnego projektowania, która uniemożliwia użytkownikom zagubienie się w dziesiątkach podmenu. Kolejną zaletą jest to, że użytkownik ekranu dotykowego ma lepszą kontrolę nad normalnymi listami rozwijanymi, ponieważ kontrola kierunkowa jest dokładniejsza niż stukanie. Korzystanie z radialnych menu w formularzach i witrynach internetowych może znacznie poprawić ekran dotykowy na stronie internetowej użytkownika i rozszerza się na takie manipulatory, jak te używane na konsolach do gier, gdzieś często używane są radialne menu, ponieważ pozwala to na łatwe przenoszenie gier na komputer. Jako, że użytkownicy komputerów stacjonarnych nie tracą, tak jak to się dzieje, radialne menu mogą uprościć długie listy do prostych kategorii, zwiększając łatwość użycia lub wydajność na stronie internetowej.
Radialne menu to świetny sposób na wyświetlenie informacji wrażliwych na kontekst, jednym z przykładów jest kliknięcie obrazu naczynia na stronie z jedzeniem i możliwość skorzystania z opcji retweeting, linku do receptury, listy składników lub zapisania zdjęcia. Musisz jednak uważać, aby menu było dostępne i proste, w przeciwnym razie możesz łatwo przytłoczyć użytkownika, zwłaszcza gdy łączysz symbole i słowa w tym samym menu radialnym. Radialne menu są znacznie łatwiejsze w użyciu, gdy statyczne, a nie dynamiczne, ponieważ może to prowadzić do trudności w wyborze obiektów, takich jak na takich stronach Phong , w tym przypadku szczególnie przy użyciu myszy jako śledzenia kursora sprawia, że jest to szczególnie mało intuicyjne.
Skeuomorfizm
Skeomomorficzne wzornictwo naśladuje wygląd i funkcjonalność codziennego obiektu, aby stworzyć intuicyjny interfejs użytkownika, coś, co ostatnio stało się nie na miejscu, zwłaszcza, że Scott Forstall zrezygnował z Apple, a płaski projekt Sir Jony'ego Ive przejął system iOS i prawdopodobnie OS X w przyszłość. Skeomomorfizm był dużą częścią nacisku Apple na bardziej intuicyjne projektowanie, ostatnio dzięki Kontaktom na Macu zaprojektowanym jako prawdziwa książka adresowa lub Kiosk i iBooks na iOS jako prawdziwe półki z książkami. Ten projekt jest bardziej korzystny dla użytkowników interfejsu dotykowego, ponieważ nie poruszamy się po świecie za pomocą kursora.
Znajomość dodaje intuicyjności podczas korzystania z dowolnego interfejsu użytkownika, co jest punktem skeomomorfizmu, aby nadać dodatkowy wymiar znajomości, łącząc siły z rzeczywistymi obiektami, dzięki czemu użytkownik natychmiast wie, jak z nim współdziałać. Udana skeomomorficzna konstrukcja oznacza, że wystarczy rzucić okiem na stronę internetową, aby dowiedzieć się, czym jest temat / do jakiej strony jest używana, dzięki czemu nie ma przestarzałych podpowiedzi i podkreśleń łączy.
Wybierz interfejs użytkownika
Jest to połączenie obu powyższych elementów, w których cały interfejs użytkownika tworzy proste pokrętło; Projekt przypomina menu promieniowe, ale zamiast obracać się w środku, wybierając stamtąd, pokrętło obraca się do pojedynczego punktu wyboru. Jest to bardzo skuteczne w przypadkach, takich jak muzyka, gdzie tarcze są często używane do miksowania ścieżki i głośności sterowania. W przypadku etykiety netto SHSK'H używają zmodyfikowanego typu interfejsu wybierania, aby wybrać ścieżkę, którą chcesz odtwarzać.
Ruch minimalistyczny
Minimalizm polega na tym, że strona internetowa jest rozebrana do jej podstawowych elementów. Jest to doskonałe rozwiązanie dla użytkowników mobilnych, ponieważ skraca czas ładowania i zużycie danych, a także pozwala użytkownikowi uzyskać dostęp do wszystkich niezbędnych informacji w przejrzystym interfejsie, który jest łatwiejszy w użyciu dla mniejszych rozdzielczości. Obecny minimalizm wykroczył poza sprowadzanie witryn do podstawowych rzeczy i utworzył nowy styl znany jako płaski projekt. Wiąże się to z przekonaniem, że intuicja nie jest już potrzebna w projektowaniu, ponieważ interfejsy i ich wykorzystanie stały się tak ważną częścią życia, że projekt może wyjść poza informowanie użytkowników, co robić, interfejs użytkownika może w końcu być narzędziem, a nie podwajać się jako Mentor. Płaska konstrukcja od dawna charakteryzuje się odważnymi kolorami bloków, ale wraz z wprowadzeniem iOS7, gradienty zajął ich miejsce w świecie bezgranicznej płaskiej konstrukcji, wydobywając elegancję z jaskrawego.
Na koniec zakończę ten artykuł witryną, która robi coś trochę inaczej. Thibaud to twórczy programista, który zaprojektował portfelowy program do tworzenia stron internetowych znany jako Pikibox. Witryna jest bardzo przyjazna w dotyku, ale bez utrudnień w dostępie do użytkowników komputerów stacjonarnych, na mniejszych urządzeniach z ekranem dotykowym, jednak użytkownik jest wysyłany do ukierunkowanego przekierowania za pomocą interfejsu mobilnego.
Prosty projekt działa wspaniale, pokazując całe jego portfolio w profesjonalny sposób, zachowując zabawny, nowy wygląd, który jest niezwykle intuicyjny. Oczywiście znaczna część projektu znajduje się w rękach użytkownika, który może zmienić położenie nawigacji i dostosować sposób jej wykorzystania przestrzennego, co niektórzy twierdzą, że nie jest to dokładnie wybór projektu. Wersja na komputery jest dostępna w czterech stylach i zapraszam do wspólnej zabawy, a także wyciągnięcia własnych wniosków na temat tego, czy jest to po prostu niezdecydowane, czy też niezwykle twórcze.
Jakie kompromisy podjąłeś w wyniku ekranów dotykowych? Czy stan zawisu jest już przeszłością? Daj nam znać w komentarzach.
Wyróżniony obraz / miniatura, dotykowy obraz przez Shutterstock.