W początkowej fazie projektowania stron internetowych na urządzenia mobilne większość deweloperów rozdawała swoją ofertę produktową. Wydali w pełni funkcjonalną wersję komputerową, a następnie wersję "zoptymalizowaną pod kątem urządzeń przenośnych", która pozbawiła wiele elementów marki i zdjęć, aby dostosować się do ograniczonych możliwości i szybkości sieci telefonów z cukierkami oraz sieci bezprzewodowych 3G.
Współczesne smartfony mogą jednak renderować strony internetowe równie skutecznie jak komputery stacjonarne, dzięki sieciom równie dobrym lub lepszym niż wczorajsze linie DSL.
Design następnie konwerguje z powrotem do interfejsu jednego użytkownika. Ale ryzyko dla projektantów nie polega na tym, że smartfon lub tablet nie może renderować nowoczesnej responsywnej strony internetowej. Przeciwnie, metoda wprowadzania danych przez użytkownika na urządzeniu z ekranem dotykowym wymaga znaczących zmian w projekcie witryny. Minęły czasy budowy strony internetowej zakładającej, że użytkownicy mają klawiaturę i mysz.
Podstawowe zasady projektowania ekranu dotykowego
Projektowanie interfejsu sieciowego obsługującego ekran dotykowy wymaga ewolucji tradycyjnego podejścia monitor-mysz-klawiatura z przeszłości. W szczególności musisz uwzględniać interakcje takie jak gesty, dotknięcia i wprowadzanie wielodotykowe.
- Dotykanie nie jest dokładne.O ile klient nie ma palców malucha, nawet przy bardzo dokładnych sterownikach oprogramowania, może być trudny do dotknięcia i być precyzyjnym.
- Gesty różnią się od zaczepów.Aby przewinąć długą stronę na ekranie dotykowym, użytkownik przesuwa palcem jedno po drugim w górę okno przeglądarki. To może nie wydawać się istotne, dopóki nie zorientujesz się, że przeglądasz za pomocą myszy, poruszasz myszą na dół .
- Dwa (i więcej) dotknięcia palcami.Użytkownik może jednocześnie używać wielu stuknięć palcem na urządzeniu, aby go kontrolować. Te dodatkowe dotknięcia mogą oznaczać coś konkretnego w zależności od systemu operacyjnego urządzenia użytkownika.
- Urządzenia o wysokim odblasku.Ekrany większości tabletów z ekranem dotykowym są wykonane z wytrzymałego szkła. Materiał ten może być bardzo trudny do odczytania, z dużą ilością odblasków, w jasnym oświetleniu. Dodatkowo, ze wszystkimi dotykiem, na ekranie pojawiają się odciski palców i smugi, które mogą wpływać na wygląd twoich stron.
- Klawiatura ekranowa.Podczas gdy niektórzy użytkownicy mają klawiaturę bezprzewodową, którą łączą się ze swoimi tabletami, większość użytkowników tabletów używa klawiatury ekranowej do wprowadzania danych. Wejście do OSK może powodować zabawne literówki, a także niewygodne korzystanie z niego przez dłuższy czas.
Ze względu na te cechy urządzenia, projektanci stron internetowych powinni podkreślić kilka podstawowych zasad projektowania dla użytkowników ekranu dotykowego:
- Nie umieszczaj klikalnych elementów zbyt blisko siebie.Nie ma sztywnej reguły określającej, jak blisko jest zbyt blisko, ale listy linków, szczególnie w niewielkim rozmiarze czcionki, mogą być trudne w nawigacji, klikając (stukając) grubym palcem. Może być denerwujące, aby powiększyć, tylko spróbuj kliknąć łącze. Ta zasada dotyczy zarówno przycisków, jak i łączy.
- Hierarchie mogą być trudne do utrzymania.Jedna popularna forma dynamicznego menu wykorzystuje JavaScript, aby otworzyć podmenu po kliknięciu przez użytkownika, a następnie umieszczeniu wskaźnika myszy nad podmenu. Stany te mogą być bardzo trudne lub niemożliwe do użycia na ekranach dotykowych, ponieważ albo nie pozostają otwarte, albo się nie zamykają.
- Przenieś linki i klikalne obszary poza prawą krawędź okna.Większość ludzi jest praworęcznych i zwykle przewijają się po tej stronie ekranu. Ponieważ przewijanie odbywa się gestem, czasami możliwe jest przypadkowe uruchomienie przeciągnięcia linka. Użytkownicy mogą się denerwować, jeśli chcą przewinąć stronę, a zamiast tego przypadkowo dotknęli linku. Przenosząc linki z prawej strony, możesz pomóc im uniknąć tej niedogodności.
- Nie ma myszy.A to oznacza, że nie ma myszy wskaźnik . Nie powinieneś polegać na zmianie kursora myszy, aby wskazać, że coś jest klikalne.
- Stany najechania nie istnieją.W związku z powyższym, ponieważ nie ma myszy, nie ma na co się kręcić. Łącze jest klikane (stukane) lub niedostępne na urządzeniu z ekranem dotykowym, więc użytkownicy nie mogą wywnioskować żadnych przydatnych informacji z takich stanów najechania, takich jak zmiany koloru, porady narzędziowe lub zmiany paska stanu.
- Czarne tła poprawiają odblaski.Witryna z czarnym tłem może być bardzo trudna do odczytania na urządzeniu z ekranem dotykowym ze względu na olśnienie. Czarny sprawia, że odciski palców na urządzeniach wyświetlają się wyraźniej, zacierając ekran. A czarny może przekształcić ekran w lustro odbijające twarz użytkownika często bardziej niż tekst na ekranie.
- Długie bloki tekstu w formularzach są trudne do napisania.Podczas gdy możliwe jest pisanie całych powieści na iPadzie lub tablecie z Androidem lub Windows, większość ludzi nie lubi używać klawiatury ekranowej dla długich tekstów. Im bardziej twój projekt sprawi, że wprowadzanie danych będzie tak krótkie i łatwe, jak to możliwe, tym lepiej.
Najważniejszym aspektem projektowania z myślą o ekranach dotykowych jest przetestuj swoje strony na urządzeniu z ekranem dotykowym. Chociaż wiele emulatorów na iPada i Androida jest dostępnych, a także wiele tabletów z systemem Windows, wciąż nie zapewniają one wrażenia ekranu dotykowego. Nie można stwierdzić, że linki są zbyt blisko lub przyciski są zbyt małe - lub że blask utrudnia odczytanie strony - chyba że wydostaniesz tablet i wypróbujesz je przed zwalniasz swój nowy projekt strony internetowej.
