Jak dostosować stół do urządzeń mobilnych. Obracanie telefonu to ostateczność

Notatka. W systemie OS X Lion (na komputerze Mac) paski przewijania są domyślnie ukryte i pojawiają się tylko wtedy, gdy są używane (nawet jeśli są ustawione na „przepełnienie:przewijanie” lub auto).

Tym razem poruszymy podobny temat, ale zajmiemy się bardziej złożoną tabelą, z nagłówkami.

Do uporządkowania danych (np. kosztów usług czy godzin pracy) i wygodnego przedstawienia ich użytkownikowi idealnie sprawdzają się tabele, które w dzisiejszych czasach powinny być dostosowane do smartfonów i tabletów, w przeciwnym razie ważne elementy przechowywane w komórkach mogą zostać ukryte ekran.

Narysujmy tabelę harmonogramu usług dostawczych z kurierami zmianowymi i cenami, dodając do komórek danych atrybut aria-label (etykieta tekstowa).

Table.delivery (szerokość: 100%; obramowanie: 0px; zwinięcie obramowania: zwiń;) table.delivery thead (grubość czcionki: pogrubienie;) table.delivery td (wypełnienie: 0,6rem 1rem; obramowanie-dół: 1px solid # e8e9eb ;)

Wygląd stołu na komputerze PC o stałej rozdzielczości 1140 pikseli. będzie wyglądać mniej więcej tak.

Podczas zmniejszania rozdzielczości wyświetlacza do 334 pikseli. komórki skurczą się tak bardzo, jak to możliwe, pozostawiając część informacji ukrytą.

Za pomocą CSS możemy osiągnąć zamierzony efekt - podzielenie tabeli na bloki zrozumiałe dla odwiedzającego przy rozdzielczości ekranu mniejszej niż 800 pikseli. Wystarczy dodać następujący kod do już utworzonych stylów:

@media ekran i (maksymalna szerokość: 800 pikseli) ( table.delivery thead ( display: none; ) table.delivery tr ( display: block; margines-dolny: 1rem; border-bottom: 2px solid #e8e9eb; ) table.delivery td ( display: block; text-align: Right; ) table.delivery td:before ( treść: attr(aria-label); float: left; waga czcionki: pogrubiona; ) )

Na poniższym zrzucie ekranu można wyraźnie ocenić wyższość tej metody.

Dziękuję za uwagę! Nie zapomnij ocenić artykułu!

Wyświetlanie obszernych danych na małym ekranie jest zawsze zagadką. Jak można to rozwiązać i jak powinien wyglądać wygodny stolik w telefonie komórkowym?

Warto zaznaczyć, że tabele często wychodzą poza ekran, nie tylko na urządzeniach mobilnych: zdarza się, że zawierają więcej kolumn czy wierszy, niż zmieszczą się na ogromnym monitorze lub nawet kilku. Jednak im mniejszy ekran, tym większe prawdopodobieństwo wystąpienia problemów z użytecznością.

Kluczowymi elementami widoku tabeli są spójność treści i znaczące atrybuty. Obydwa są szczególnie ważne w przypadku stołów mobilnych. Najpierw należy stworzyć wygodny stolik dla dużych monitorów, a następnie stworzyć wersję na małe ekrany. Taka potrzeba może być doskonałym powodem do udoskonalenia zawartości tabeli i uczynienia jej wygodniejszą dla wszystkich użytkowników.

Liczba kolumn tabeli wyświetlanych na ekranie mobilnym zależy od ich szerokości, a ich zawartość powinna być czytelna, bez konieczności korzystania z zoomu.

W przypadku skomplikowanych lub długich tekstów, np. w tabelach porównawczych, na wąskim ekranie telefonu komórkowego zmieszczą się tylko 2 kolumny. A jeśli tabela jest wypełniona głównie liczbami, kolumny można zawęzić i dzięki temu zmieścić więcej.

Statystyki National Rugby League składają się z liczb, dzięki czemu 11 kolumn wygodnie mieści się na ekranie telefonu komórkowego, bez konieczności przewijania w poziomie. Należy pamiętać, że wynik ten osiąga się poprzez użycie wyłącznie logo drużyny przeciwnej w pierwszej kolumnie i skrótów, które mogą nie być jasne dla niewtajemniczonych. Tak szczegółowe statystyki dotyczące zawodników interesują jednak tylko fanów rugby.

Obracanie telefonu to ostateczność

Jeśli obrócisz telefon w poziomie, na ekranie zmieści się więcej kolumn. Jednocześnie jednak zmniejsza się liczba linii, a użytkownikom może denerwować konieczność obracania smartfona (zwłaszcza jeśli ma blokadę obrotu). Zastanów się dobrze, czy duża szerokość stołu uzasadnia te wady.

Aby porównać karty kredytowe na stronie Citi, użytkownicy muszą postępować zgodnie z instrukcją: „Obróć telefon poziomo, aby kontynuować porównywanie kart kredytowych”. Jednocześnie podczas obracania większość ekranu zajmują ogromne obrazy kart kredytowych, które podczas przewijania są nieruchome, pozostawiając bardzo mało miejsca na samą zawartość tabeli. To błąd wielu witryn mobilnych: jeśli na komputerze stacjonarnym obrazy mogą być dobrym nagłówkiem kolumny, to na telefonie komórkowym są potrzebne.

W każdej tabeli obejmującej więcej niż jeden pionowy ekran lepkie nagłówki kolumn pomagają użytkownikowi uniknąć nieporozumień co do kontekstu.

W tabeli porównawczej z Best.Buy po lewej stronie nie są zapisane ani kolumny, ani ich nagłówki, a dane są trudne do odczytania. Po prawej stronie widać, jak wygląda ta tabela po przewinięciu, bez żadnych widocznych wyjaśnień.

Chociaż jest to ogólnie niepożądane zarówno na urządzeniach mobilnych, jak i na komputerach stacjonarnych, jest stosunkowo akceptowalne w przypadku dużych stołów na urządzeniach mobilnych. Jeśli dane nie mieszczą się na ekranie, odwiedzający mogą być zmuszeni z nich skorzystać. Jednak w tym przypadku jest to konieczne: powinno być oczywiste, że to nie wszystkie dostępne dane. Podobnie jak w przypadku suwaków, strzałki i przycięte elementy przekazują tę informację najwyraźniej. Czasami używa się kropek, ale zazwyczaj są one trudniejsze do zauważenia i zrozumienia.

Na stronie eBag ostatnia kolumna produktów jest obcięta, aby użytkownicy rozumieli, że istnieje możliwość przewijania w poziomie.

Witryna Subaru wykorzystuje kropki i strzałki nad tabelą, aby pokazać użytkownikom, że dostępnych jest więcej ekranów z treścią. Kropki powodują pewne zamieszanie, ponieważ dwie z nich są podświetlone, aby pokazać „bieżącą lokalizację” (to znaczy dwie aktualnie widoczne kolumny). Ponadto lepiej jest umieścić strzałki nie nad stołem, ale bezpośrednio w nim.

Jeśli użytkownicy muszą skorzystać z przewijania w poziomie, skrajna lewa kolumna, która zwykle zawiera nagłówki wierszy, powinna zostać zablokowana, aby użytkownicy zawsze widzieli nagłówki wierszy.

Fidelity poprawiło nazwy załączników i nagłówki kolumn. Ostatnia kolumna po prawej stronie została przycięta, aby pomóc użytkownikom zrozumieć, że dostępne jest przewijanie w poziomie.

W witrynie Officeworks.com.au naprawiono pierwszą kolumnę produktów, aby użytkownicy mogli porównać z nią wszystkie pozostałe opcje. Produkt w pierwszej kolumnie służy jako punkt odniesienia do porównań, a użytkownicy mogą go zastąpić czymś innym. Strzałki umieszczone bezpośrednio w tabeli wyraźnie pokazują, że dane można przewijać w lewo i prawo.

Jeśli dane nie mieszczą się na ekranie, użytkownicy prawdopodobnie nie będą mieli czasu ani ochoty, aby je w pełni zbadać. Pytanie brzmi więc, jak zapewnić im tylko te informacje, których potrzebują. Odpowiedź na to pytanie zależy od zadania i rodzaju danych. Oto dwie strategie ograniczania ilości danych w różnych sytuacjach:

• Użytkownik wybiera dane, które go interesują, zanim je zobaczy.
• Użytkownik podczas ich przeglądania wybiera interesujące go dane.

Pierwsze podejście działa, gdy użytkownik musi zobaczyć dane, ale nie je porównać, a przed załadowaniem danych wybiera tylko to, czego potrzebuje. Przykładowo, może go interesować jedynie charakterystyka konkretnego samochodu, właściwości odżywcze konkretnej potrawy czy statystyki dotyczące jednego konkretnego gracza, a użytkownik nie porównuje ich z innymi opcjami.

Aby wyświetlić informacje o wartościach odżywczych dotyczących Jamba Juice, odwiedzający muszą wybrać napój, który ich interesuje, aby wyświetlić informacje na jego temat. Przełącznik Mały/Średni/Duży pozwala wybrać żądaną opcję, ale nie pozwala na ich porównanie. Aby zrozumieć np. różnicę w kaloriach pomiędzy małą i średnią szklanką, użytkownik musi najpierw zapamiętać liczbę kalorii dla małej szklanki, następnie przejść na średnią, sprawdzić jej liczbę kalorii i odjąć jedną od siebie nawzajem – mnóstwo pracy umysłowej, na którą większość ludzi jest zbyt leniwa.

Druga strategia polega na oddaniu użytkownikowi kontroli nad recenzją podczas przeglądania danych. Na przykład jeden użytkownik chce zobaczyć podobieństwa lub różnice między dwiema opcjami, podczas gdy inny chce poznać specyficzne cechy produktów, takie jak pojemność bagażnika czy zabezpieczenia, ale nie interesuje go różnica w poziomie hałasu między dwoma samochodami. Możliwość wyboru wierszy i kolumn do wyświetlenia pozwala użytkownikom skupić się na funkcjach, które są dla nich ważne.

W witrynie firmy Dell użytkownicy wybierają specyfikacje produktów, które ich interesują, z menu znajdującego się w górnej części strony. Po lewej: Domyślnie wyświetlane są wszystkie cechy. W centrum: użytkownik wybiera te, których potrzebuje. Po prawej: Wyświetlane jest tylko to, co wybrał.

Jeśli tabela zawiera dane, które można pogrupować według kategorii, zrób to i pozwól użytkownikom mobilnym na:

• uzyskać ogólne zrozumienie typów danych dostępnych w tabeli;
• uzyskać bezpośredni dostęp do interesujących Cię informacji.

W witrynie Samsung.com tabele porównawcze mogą wyświetlać wszystkie specyfikacje lub tylko podobieństwa między produktami, tylko różnice lub kryteria wybrane przez użytkownika. Witryna grupuje dane o podobnych atrybutach, umożliwiając wybranie interesujących zestawów danych. Jednocześnie grupy danych dają przegląd zawartości strony, informując użytkowników, jakie informacje o produkcie są dostępne.