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