Техники разработка правельного интерфейса сайта

prostoЧто такое простота? Простота — это когда все естественно, просто и доступно. И не удивительно, что простота очень часто должна присутствовать в дизайнах различных интерфейсов. Многие люди по своей природе не любят сложности в гаджетах и программах. Есть некоторые люди, которые рады покопаться и разобраться, как что работает, но для многих из нас неспособность быстро разобраться с чем-либо выливается в напрасно потраченное время. И это далеко не хорошо!

Если Вы можете взять сложный прибор или программу и любым образом поменять, реорганизовать и сделать редизайн интерфейса для его упрощения, значит Вы на верном пути.

1. Модальные окна

Я уверен, что Вы помните времена, когда в веб браузерах появились блокираторы всплывающих окон, когда Вам приходилось бороться с большим количеством окон, которые вдруг решили появиться перед Вашими глазами. Никто не любил такие всплывающие окна, и блокирующие технологии были разработаны для их истребления. Но сегодня мы можем наблюдать за новым видом всплывающих окон — более красивых и приносящих пользу посетителям. Это так называемые модальные окна.

Модальные окна похожи на всплывающие, однако вместо появления в новом окне, они появляются прямо внутри текущего поверх всего контента. Модальные окна очень часто требуют реакции пользователей, поэтому обычно под ними затемняется, чтобы сконцентрировать внимание пользователя только на этом окне.

Итак, для чего же нам использовать модальные окна и как они упрощают ? Чтоб понять их цель необходимо взглянуть на возможную альтернативу. Альтернатива использования модальных окон обычно означает загрузку новой страницы. К примеру, на некоторых сайтах есть отдельная страница настроек Вашего аккаунта. При нажатии на ссылку настроек Вы переходите на соответствующую страницу. Но что если там только несколько настроек — стоит ли для этого перенаправлять пользователя на новую страницу?

Во многих случаях, такие вещи как настройки, формы входы и прочее могут быть показаны в модальных окнах над содержимым страницы. Это экономит время юзерам и существенно уменьшается нагрузка на сервер, так как ему приходится обрабатывать меньше запросов.

 

ActionMethod, приложения для учета проектов, использует часто модальные окна. Перед Вами форма оценки.

2. Кнопки при наведении

Если в Вашем приложении есть много кнопок (команд, функций), пользователям необходимо будет обязательно с ними ознакомиться, чтобы найти необходимое. Некоторые кнопки не так важны и не используются не так часто. В таком случае необходимо их спрятать.

Но не просто спрятать, а сделать так, что если пользователь наводит на определенный регион сделать так, чтоб они вновь появились. Это так называемые всплываемые кнопки (кнопки при наведении). К примеру, Twitter, популярный сайт микроблоггинга, показывает список всех сообщений, которые сделали Ваши друзья. Каждое сообщение находится в отдельной ячейке. И Вы можете предпринять два действия к каждому сообщению — добавить в избранное или ответить.

Если бы кнопки «Добавить в избранное» и «Ответить» были на каждом сообщении — внешний вид выглядел бы очень загруженным. Вряд ли Вы захотите ответить всем, и еще меньше вероятность того, что все сообщения пойдут в избранное. Поэтому Twitter показывает кнопки, только после наведения на ячейку с сообщением. Это делает интерфейс более простым без потерь функциональности. Есть небольшой риск, что некоторые юзеры не найдут эти кнопки, однако практика утверждает обратное, так как они обычно наводят мышкой на то что видят и быстро во всем разбираются.

 

Twitter показывает кнопки «Добавить в избранное» и «Ответить» при наведении на сообщение

3. Управление по требованию

Другой способ прятанья кнопок — это использование . Если пользователь нажимает в необходимом месте — они появляются. К примеру, у Вас есть форма поиска на сайте, которая позволяет использовать разные фильтры для поиска. Вместо показа всех фильтров, Вы можете их спрятать и сделать доступными только при нажатии. Тем самым Вы придаете Вашему приложению продвинутую функциональность для тех, кто в ней нуждается, но при этом сохраняете интерфейс простым для тех, кто не нуждается в этих дополнительных функциях.

Не все пользуются более продвинутыми способами поиска на Вашем сайте. Если их спрятать, Вы сделаете интерфейс чище и более понятливым для новых посетителей. Однако, иногда бывает очень трудно выбрать что прятать, а что нет.

 

Kontain, приложение для блоггинга, предлагает продвинутые функции поиска при нажатии в конце формы поиска.

4. Расширяющиеся формы

Я уверен, что Вы знакомы с полем загрузки файлов, которое Вы видите во многих формах. Обычно это небольшое поле с кнопкой выбора файла сбоку. Представьте ситуацию, что Вам необходимо загрузить сразу несколько файлов. Вы можете отобразить несколько полей для загрузки, однако это уже загрузит Ваш интерфейс и Вы не можете предугадать в скольких полях нуждается пользователь. Отличное решение в данной ситуации это расширяющаяся форма.

Как только юзер загружает один файл, второе поле появляется снизу. Вы можете применить эту технику и для других полей ввода. К примеру, в форме необходимо указать множество email адресов. Вместо того, чтоб иметь много полей, можно использовать только одно или несколько, но при этом другие будут всплывать ниже по мере необходимости. Это сэкономит Вам место и разгрузит интерфейс.

 

Gmail отображает только одно поле для прикрепления файла при написании письма. Вы можете нажать на «Прикрепить еще файл» для загрузки дополнительных файлов

5. Надписи внутри форм

Формы очень быстро могут стать слишком сложными. Текстовые поля, надписи, выпадающие списки, чекбоксы и другое могут запутать любого. Более того заполнение форм не очень веселый и иногда долгий процесс, поэтому упрощение формы обычно экономит юзерам много времени. Хорошая техника, которая поможет сделать Ваши формы проще это перенос текстовых обозначений извне формы непосредственно в текстовые поля. То есть, место показа текста рядом с формой, Вы показываете это уже заполненным в форме.

Это экономит место, сужая общий размер формы. Маленькие детали формы кажутся проще, и форму становится легче заполнить. Такая техника не подойдет объемным формам с большим количеством разных полей, но для маленьких форм это то, что надо (Например, для формы входа на сайт).

Однако, есть один незначительный минус, который можно доработать. Когда пользователь впервые загружает страницу, он увидит все поля с надписями. Как только он нажмет на поле надпись исчезнет, позволяя юзеру ввести свои данные. А что если после нажатия он забудет что именно необходимо вводить? Ему понадобиться кликнуть в другом поле чтоб увидеть текстовое описание снова.

Возможный выход из ситуации: как только юзер кликает на поле, текстовое описание тускнеет, но остается видимым. Как только он начинает печатать — оно исчезает.

 

MobileMe показывает описание внутри форм, которое тускнеет при выборе поля.

6. Иконки вместо текста.

Для достижения простоты в дизайне интерфейса, Вам необходимо избавиться от всех лишних и редко используемых частей. Это касается не только кнопок (управления), но и текстовых надписей. Если в Вашем интерфейсе их много, подумайте нужны ли они? Разве без них становиться непонятно? Если текст говорит о чем-то само собой разумевшимся, тогда Вам не нужен это текст.

К примеру, подумайте про сообщения в блогах. Под каждым сообщением у Вас идут время публикации и автор. Надписи вроде «Автор» и «Дата» Вам скорее всего не нужны. Когда кто либо видит имя и дату под сообщением, он сразу понимает что имеется в виду. Отсутствие лишнего текста поможет сделать Ваш интерфейс более привлекательным.

Иногда когда отсутствие текста не работает, можно заменить его иконкой. У иконки есть преимущества перед текстовыми описаниями. Она занимает меньше места. На ней легче сконцентрироваться и ее цвет и форма в глазах юзеров выглядит более привлекательной. Например, если у Вас есть текст «Теги:», за которым идет перечисление тегов, Вы можете поместить маленькую картинку тега вместо текста.

Конечно же, это не выход во всех случаях. Необходимо к этому подходить осторожно. Чтоб избежать возможных проблем можно использовать иконки вместе с текстом, но в таком случае сэкономить место не удастся.

 

Highrise, CRM приложение, использует иконку тега вместо текста.

7. Управление основано на контексте

Есть несколько подходов, которые Вы можете использовать в дизайне интерфейса основанных на контексте и последовательности. Первый гласит, что необходимо сохранять (на всех страницах) месторасположение всех кнопок на Ваших сайтах (или приложениях) в одном месте для того, чтоб юзеры знали что и где находится. Другой подход гласит, что необходимо менять кнопки (управления, навигацию) в зависимости от контекста страницы. Второй подход базируется на том, что пользователю необходимо показывать только то, что ему необходимо именно на этой странице для выполнения задания.

Хорошая иллюстрация обоих подходов продемонстрирована в недавнем редизайне интерфейса Microsoft Office. Office 2003 и предыдущие версии придерживались первого подхода и везде были одни и те же кнопки. У Вас всегда был набор действий, который отображался сверху, независимо от того работали ли Вы с таблицами, графикой или текстом. Office 2007 практикует же другой подход. Сверху Вы видите набор вкладок. При выборе какой-либо вкладки Вам показывается набор функций необходимых только непосредственно для этой вкладки (работа с таблицами, графикой, текстом и т.д.).

Контекстный подход позволяет Вам показывать меньше функций (кнопок) в определенный отрезок времени, но в то же время, больше функций (кнопок) именно для поставленной задачи. Я бы не советовал использовать данный подход для общего дизайна сайтов, так как юзеры предпочитают одинаковую навигацию на всех страницах сайта.

Поэтому данный метод стоит использовать в разных веб приложениях, так как они являются не просто сайтами — они являются программным продуктом. Люди больше время тратят на изучение приложений, и у них будет больше возможностей изучить все тонкости работы. Чем сложнее приложения, тем больше разработчикам стоит задуматься о контекстном подходе, так как в таком случае на экране может быть чрезмерно много информации для восприятия. Показывая только несколько доступных для определенной работы функций, позволит юзерам сделать что-либо намного быстрее.

 

Freckle, приложение за контролем времени, имеет переключатель в верхнем меню. Переключает между режимом введение времени и созданием отчета — две вещи одновременно сделать не удастся.

Заключение

Самый простой способ достичь простоты — это продуманные сокращения — John Maeda, «The Laws of Simplicity».

Делая Ваш интерфейс меньше, пряча продвинутые функции и удаляя очевидное — вот скорейший путь к простоте. На этом пути у Вас возникнут множество преград. Любое мельчайшее изменение будет замечено, и многие будут жаловаться и требовать вернуть все обратно. Но у каждого Вашего пользователя разные потребности и способы использования Ваших сайтов, приложений. Если Вы будете прислушиваться ко всем одновременно, Вы вряд ли сможете достичь совершенства. Более того, Вы можете упасть в глубокую яму, из которой не будет дороги обратно.

Как только новая функция будет добавлена, будет очень трудно ее убрать, так как многие начнут ей пользоваться. Поэтому, перед добавлением полностью убедитесь в ее целесообразности и необходимости.

Простота — это уменьшения и реорганизация сложного в простое и легко управляемое. Лучше всего всегда стремится к тому, чтоб убрать какие-либо функции, чем их добавить. Продукт с меньшим количеством кнопок не обязательно будет менее функциональным — скорее всего он просто лучше продуман.

Запись навигация

Top