Сензорните екрани работят различно от клавиатурите и мишките
В първите дни на разработването на уебсайтове за мобилни устройства повечето разработчици раздадоха продуктовото си предлагане. Те пуснаха напълно функционална десктоп версия, а след това и "мобилна оптимизирана" версия, която премахна голяма част от брандирането и изображенията, за да приспособи ограничените възможности и скоростта на мрежата на сладкарски телефони и 3G безжични мрежи.
Съвременните смартфони обаче могат да правят уеб страниците също толкова ефективно, колкото и настолните компютри, чрез мрежи, които са добри или по-добри от линиите DSL вчера.
След това дизайнът се обединява обратно към интерфейса за един потребител. Но рискът за дизайнерите не е, че смартфон или таблет не могат да направят съвременен уеб сайт с отзивчивост. По-скоро методът за въвеждане на потребител на сензорен екран изисква значителни промени в дизайна на съответния сайт. Дните на изграждане на уебсайт, в който посетителите имат клавиатура и мишка, са приключили.
Основни правила за дизайн на тъчскрийн
Проектирането на уеб интерфейс с чувствителен на допир екран изисква еволюция на традиционния подход на монитор-мишка-клавиатура от миналото. По-специално, трябва да поемете взаимодействия като жестове, кранове и мултитъч въвеждане.
- Докосването не е точно. Освен ако клиентът няма пръсти на дете, дори и с много точен софтуер за управление, може да бъде трудно да се докосне и да бъде точен.
- Жестовете са различни от крановете. За да превъртите дългата страница на сензорен екран, потребителят прекарва един пръст нагоре в прозореца на браузъра. Това може да не изглежда значимо, докато не осъзнаете, че сърфирате с мишка.
- Два (и повече) крачета за пръстите. Потребителят може да използва няколко ключа за пръста на устройството по едно и също време, за да го управлява. Тези допълнителни кранове могат да означават нещо специфично в зависимост от операционната система на устройството на потребителя.
- Устройства с висока яркост. Екраните на повечето таблетни таблетки са изработени от здраво стъкло. Този материал може да бъде много трудно да се чете, с много отблясъци, при ярка светлина ситуации. Освен това, с всички докосващи, те получават пръстови отпечатъци и зацапвания на екрана, които могат да повлияят на това, как изглеждат страниците ви.
- Екранна клавиатура. Докато някои потребители имат безжична клавиатура, те се свързват към таблетите си, повечето потребители на таблети използват клавиатурата на екрана за въвеждане на данни. Въвеждането на OSK може да доведе до някои оживени печатни грешки, както и до неудобство за използване за продължителни периоди от време.
Поради тези характеристики на устройството, уеб дизайнерите трябва да подчертаят няколко основни правила за проектиране за потребители със сензорен екран:
- Не поставяйте елементите, върху които да се кликва, твърде близо един до друг. Няма лесно и бързо правило, определящо колко близо е твърде близо, но списъците с връзки, особено при малък размер на шрифта, могат да бъдат трудни за навигиране, като щракнете върху (докосване) с дебел пръст. Това може да е досадно да се наложи да увеличите само, за да опитате да кликнете върху връзка. Този принцип е валиден както за бутоните, така и за връзките.
- Йерархиите трудно могат да бъдат отворени. Една популярна форма на динамичното меню използва JavaScript, за да отвори подменю, когато потребителят кликне и след това замести курсора на мишката над подменюто. Тези състояния могат да бъдат много трудни или невъзможни за използване на сензорни екрани, защото те или не остават отворени, или няма да се затварят.
- Преместете връзките и местата, към които може да се кликва, далеч от десния край на прозореца. Повечето хора са с дясната ръка и са склонни да се движат от тази страна на екрана. Тъй като завъртането се осъществява с жест, понякога е възможно да се направи прескачане на връзка по погрешка. Потребителите могат да се дразнят, ако искат да се придвижват на страницата и вместо това в крайна сметка случайно докосват връзка. Като преместите връзките си от дясната страна, можете да им помогнете да избегнат това неудобство.
- Няма мишка. И това означава, че няма показалец на мишката . Не трябва да разчитате на промяната на показалеца на мишката, за да покажете, че нещо може да се кликва.
- Състоянията на мишката не съществуват. Като последица от горното, тъй като няма мишка, няма нищо, с което да се движите. Връзката се кликва върху или не върху устройство със сензорен екран, така че потребителите не могат да извлекат полезна информация от такива състояния на задържане като промени в цвета, съвети за инструментите или промени в лентата на състоянието.
- Черният фон увеличава отблясъците. Сайтът с черен фон може да бъде много труден за четене на сензорен екран поради отблясъка. Black прави пръстовите отпечатъци на устройствата видими по-ясно, размазвайки екрана. И черно може да превърне екрана в огледало, отразяващо обратно, че потребителите често са повече от текста на екрана.
- Дългите блокове от текстове във формуляри са трудни за писане. Въпреки че е възможно да напишете цели романи на iPad или на таблет с Android или Windows, повечето хора не обичат да използват екранната клавиатура за дълги разтегателни текстове. Колкото повече Вашият дизайн може да направи въвеждане на данни възможно най-кратък и лесен, толкова по-добре.
Най-важният аспект на дизайна със сензорни екрани има за цел да тествате страниците си на сензорен екран . Докато има много iPad и Android емулатори, както и много таблети с Windows, те все още не осигуряват усещането за сензорен екран. Не можете да кажете, че връзките са твърде близки или че бутоните са твърде малки или че отблясъците правят страницата твърде трудна за четене, освен ако не извадите таблет и ги изпробвате, преди да пуснете новия си дизайн на уебсайтове.