Модераторы: Illuminaty

Поиск:

Добавить материал
 

Об удобстве интерфейсов
DezmASter
Репутация: 2
Всего: 109

Профиль
Быстрая цитата Цитата
Теги:
Сегодня, дорогие друзья, мне бы хотелось поговорить об насущной проблеме всеобщего одваноливания (прим. автора: веб 2.0) — проблеме хороших графических интерфейсов на веб-сайтах.
Многие дизайнеры совершают некоторые довольно типичные ошибки при проектировании пользовательских интерфейсов, и это приводит к различным неудобствам при их использовании конечными пользователями.


0. Введение

Хотелось бы сразу объяснить для кого пишется эта статья. Эта статья для тех, кто не первый год в дизайне, и знает хотя-бы азы подбора цветов, шрифтов, и собственно расположения их на сайте.
Предполагается, что дизайнер прочитавший эту статью не будет использовать розовый на голубом, или использовать сглаженный шрифт для основного текста. Также считается, что дизайнер понимает значения словосочитаний "пром. дизайн", "палитра", "градации", "естественный раздражитель", "эргономика". Для тех, кто по какому либо обстоятельству не знает значения этих словосочитаний — в главе "Словарь терминов" я их расшифрую.

Пока же наслаждайтесь чтением.



1. Группировка элементов

Группировка элементов UI — вообще очень важная часть планирования интерфейса. От удачности комбинации элементов взаимодействия зачастую зависит, уйдёт ли пользователь с сайта или же станет его активным пользователем.

Помните, группировать элементы интерфейса нужно грамотно. Мы рассмотрим несколько способов группировки:

а) Группировка по функциям
б) По результату действия
в) Смешанный тип группировки

Сейчас мы приступим к детальному рассмотрению данных способов.

а) По функциям

Это относительно простой способ группировки элементов интерфейса, но многие дизайнеры не используют его.

Разбейте элементы вашего интерфейса на классы (группы, блоки — как удобнее называть) и разместите эти блоки в порядке убывания важности для пользователя. Между прочим, это не так уж легко. Проследите за тем, куда смотрит ваш глаз в первую очередь, запомните основные точки и нарисуйте ломаную прямую. Это — "линия зрения" пользователя.

Например возьмем интерфейс Google и проследим за взглядом:
user posted image

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

б) По результату от действия

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

в) Смешанный

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

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

Стремитесь использовать опыт других дизайнеров! Часто анализ интерфейсов популярных сайтов той же тематики позволяет избежать большинства ошибок в своих работах.

Пример использования смешанного типа группировки:
Портал Netz.ru и аналоги. Дизайн выглядит хорошо, но он неудобен.
user posted image




2. Расположение элементов

А как же всё-таки располагать элементы, чтобы работать с сайтом было удобно каждому пользователю, даже самому неопытному?

Давайте поразмышляем, какие раздражители сильнее всего действуют на человека?

1. Звук
2. Прикосновение
3. Цвет
4. Запах

Т.к. чисто технически прикосновение и запахи на сайты не внедрены, мы рассмотрим цвет и звук.

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

Сам по себе цвет не может повлиять на удобство страницы, но его можно использовать в вспомогательных целях.

Группируйте элементы навигации по функциям или результату, и отметьте каждую функцию цветом, отличным от используемых для других элементов — для наглядности использования.
Пример: для работы с картинками можно использовать один цвет, а для работы с текстом — другой.
Существует прекрасная утилита для подбора удачных цветов. Color Schemer Studio + Color Pix
user posted image



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



3. Деление на блоки

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


Установить важность контента можно на сайте www.crazyegg.com, поставив на несколько дней скрипт слежения за кликами ваших пользователей. Впрочем, это скорее относится к сайтам, у которых уже был старый дизайн, и вы занимаетесь его переработкой. Если вы создаёте дизайн для нового сайта, лучше попросите совет у более опытных коллег или заказчика.
Довольно часто именно они обосновывают важность того или иного блока на сайте.

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

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

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


Вот несколько правил, о которых неплохо бы помнить при составлении макета дизайна:

1. Не экономьте место. Поверьте — приятный глазу фон поможет хорошо разграничить блоки, при этом не раздражая пользователя. Обычному человеку нужно получить удобный инструмент для работы, а не искать элементы интерфейса в каше, потому что дизайнер решил сэкономить немного пикселей.
user posted image



2. Используйте небольшие иконки. Не стоит зацикливаться только на тексте и блоках — пользователю будет не за что зацепиться при просмотре страницы. Да и своим последователям вы сильно упростите работу по редизайну (в будущем редизайн сайта будет наверняка, т.к. технологии развиваются, а дизайн устаревает). Чем же иконки помогают в редизайне? Объясню. Глаза пользователя не отличаются от глаз дизайнера. Дизайнер также выявляет принадлежность того или иного блока по его графическому исполнению, и небольшие пиктограммы помогают ему в этом. Приведу пример на рисунке ниже. Пиктограммы которые узнаваемы абсолютно без слов.
user posted image



3. Используйте как можно меньше линий на сайте. Так уж устроен человеческий глаз — ему нужно довольно много пустого пространства вокруг важных элементов. Часто вокруг важных элементов дизайнеры плодят кучу второстепенных линий, финтифлюшек и прочего. Поверьте — никому это не нужно.
user posted image



4. Старайтесь не использовать вложенные таблицы. Довольно часто можно встретить таблицы в таблицах, причем много раз я видел, что каждая таблица ещё и имеет видимые границы. Итог — каша в голове пользователя, неудовольствие заказчика, и как следствие, дизайнера.

5. Используйте вкладки. Вкладки — великая вещь. Другое дело, что часто дизайнеры не могут правильно их оформить. Активная вкладка должна отличаться от той, на которую наведён курсор и остальных.
Пример правильного использования вкладок показан на рисунке ниже:
user posted image


Давайте рассмотрим рисунок выше.

1. Сразу видно активную вкладку: она

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

2. Также сразу видно неактивную вкладку: она

- отличается цветом от активной
- опущена пониже активной
- имеет более простой дизайн
- визуально меньше активной вкладки


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



4. Кнопки

а) Не плодите кнопки везде, где это возможно. Лучше, если это возможно, использовать обычные ссылки. Средний пользователь попросту путается в обилии кнопок.

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

в) Лучше не пользуйтесь нестандартным дизайном кнопок. Это путает пользователя, и он теряется при работе с ними. Воспользуйтесь стандартными браузерными кнопками — так вы не отпугнёте новичков, да и опытным пользователям с ними привычнее работать.

г) Если уже воспользовались нестандартными видом кнопок, не делайте не контрастные кнопки. Не располагайте белый шрифт на светлой кнопке или чёрный — на серой. Судя по большинству отзывов, это доставляет некоторые неудобства — в надписи на кнопках приходится вчитываться, а это — лишнее потраченное время. Как известно, скорость работы тоже сильно влияет на удовлетворённость пользователя интерфейсом.

д) Делайте кнопки так, чтобы они отображались даже у тех пользователей, у которых отключены картинки в браузере.




5. Флажки или опции?

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

Хороший пример — проведение опроса: если несколько вариантов ответа могут быть выбраны одновременно, нужно использовать флажки. Если же нужно выбрать только один вариант, то используются опции.
user posted image




6. Визуальная группировка

Методы визуальной группировки довольно хорошо описаны здесь, но и тут я постараюсь кратко и четко охарактеризовать положение вещей. Посмотрите на этот рисунок:
user posted image



Заголовок текста на картинке слева отделён от текста, к которому относится. Это — неправильный подход. Это применимо и к формам: привязывайте наименования полей к ним самим для избежания неясностей. Посмотрите на рисунок ниже:
user posted image



Кстати, часто подобная проблема проявляется и в других местах, например, при отображении результатов голосования:
user posted image



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

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



7. Стили и отступы

Каждый человек, хоть раз бравший в руки книгу, знает, что в книге есть отступы на страницах.

user posted image

Наверняка, многие догадались, к чему я это веду. Люди привыкли к печатным изданиям, и отказываться от отступов на вашем сайте не в коем случае нельзя.

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

user posted image



8. Словарь терминов

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

Цитата

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



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

Цитата

Также палитра (в переносном смысле) — подбор цветов, типичных для некоторой картины, для произведений определенного художника или художественной школы.



Градации — изменение одного цвета на один шаг по графической палитре.

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



На этой ноте мы можем окончить статью.
Я надеюсь, что она вам понравилась, и я постараюсь написать продолжение.
Желаю удачи в создании хороших, удобных интерфейсов.
Если у вас возникли какие-то мысли по поводу моей статьи, прошу писать мне tuda.gde@lampochek.net (именно в таком написании).

С уважением, DezmASter

Автор: Бирзул Ярослав
Сайт автора: www.birzool.com


Комментарии посетителей:


Дата 20.8.2007, 17:03 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата
Str!pe ****   Репутация: 3  Всего: 152 
Цитата(DezmASter @  6.5.2007,  03:14 Найти цитируемый пост)
Предполагается, что дизайнер прочитавший эту статью не будет использовать розовый на голубом

smile Все зависит от подачи smile Еще скажи что зеленый с краснным не сочетается smile

Добавлено через 5 минут и 27 секунд
А вообще все по теме smile
PM MAIL ICQ   Вверх

Дата 20.8.2007, 18:47 (ссылка) |  (голосов:1) Загрузка ... Загрузка ... Быстрая цитата Цитата
DezmASter ***   Репутация: 2  Всего: 109 
Str!pe, попробуй любые оттенки розового на любых оттенках голубого - не считая приближенных к белому.

Красный с зеленым сочетается, но только не на экране - ибо он светится. А скажем листики и плоды клубники не светятся, поэтому и хорошо выглядят.
PM WWW ICQ   Вверх

Дата 21.9.2007, 21:23 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата
dm9 ****   Репутация: 29  Всего: 137 
Цитата(DezmASter @  6.5.2007,  04:14 Найти цитируемый пост)
Давайте поразмышляем, какие раздражители сильнее всего действуют на человека?
1. Звук
2. Прикосновение
3. Цвет
4. Запах
Т.к. чисто технически прикосновение и запахи на сайты не внедрены, мы рассмотрим цвет и звук.


Самое интересное начинается там, где запах, тактильные ощущения передаются через визуальный дизайн. smile

Статья скомпонована сумбурно. Логика непонятна. Просто поток мыслей. Если к ней приложить руку дизайнера smile - может получиться интересно.
PM MAIL ICQ   Вверх

Дата 22.9.2007, 10:07 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата
DezmASter ***   Репутация: 2  Всего: 109 
dm9, примеры можно где тактильные ощущения передаются через визуальный дизайн? Не учитывая эффекты плацебо.

Насчет компоновки статьи и её логики - как ты уже правильно заметил, это всего-лишь список моих заметок, которые я отмечал себе в блокнотик. В таком же порядке они и рассмотрены.
PM WWW ICQ   Вверх

Дата 22.9.2007, 23:46 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата
dm9 ****   Репутация: 29  Всего: 137 
Тактильные ощущения - это "мягко", "пушисто", "тонко". То, что мы ощущаем сначала руками, а потом учимся различать по визуальным признакам. Тебе уже не обязательно трогать взбитые сливки, чтобы понять, что они "воздушные". Потрогай тонкую шелковую ткань - и второй раз тебе не потребуется этого делать - достаточно посмотреть. Я подразумевал подобный перенос наших осязательных ощущений в визуальный дизайн. У каждого дизайна есть набор "ощущений", но про некоторые можно точно сказать, какие они на ощупь. Примеры навскидку не вспомнились - пришлось искать.
Например, можно "пощупать" логотип Хабрахабра (надпись текстовую особенно).
Можно посмотреть на http://delphimaster.ru/ - ощущение от этого проекта у меня очень сильно связано с дизайном, и это именно осязательные ощущения. Ребристая черезполосица, ледяная звёздочка карты сайта на тёплой подстилке...
Я не изучал этого, но, думаю, статистически у всех европейце-американцев ощущения будут примерно одинаковы от одного и того же изображения. Просто некоторые не хочется (в голову не приходит) "брать в руки", а некоторые очень сильно указывают нам на испытанные тактильные ощущения. Причём я на знаю, плохо это или хорошо. Но, как минимум, необычно. Всё же склоняюсь к мысли, что хорошо. Ведь хороший рисунок - это реальный рисунок (наверное).
На самом деле, примеров много, просто ярких и при этом позитивных мало.
Вот ещё сайт: http://drkb.ru/ Очень ярко это передаёт. Вообще, во многих карамелькиных дизайнах это видно. Вспомни первый зелёный логотип Винграда хотя бы. Текущий тоже имеет ощущения, хотя уже меньше.

Добавлено @ 23:49
PS Всё в плане личных мыслей и ощущений, я нифига не профессиональный художник (здесь не дизайн скорее, именно искусство художника). Наверное, для всего этого есть какое-то более короткое описание. Не знаю.

Это сообщение отредактировал(а) dm9 - 22.9.2007, 23:55
PM MAIL ICQ   Вверх

Дата 23.9.2007, 00:18 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата
dm9 ****   Репутация: 29  Всего: 137 
Создал тему "Тактильные ощущения в дизайне". Интересно обсудить smile
PM MAIL ICQ   Вверх

Дата 23.9.2007, 00:21 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата
DezmASter ***   Репутация: 2  Всего: 109 
dm9, я думаю это ложные тактильные ощущения. 

Пользователь видит то, что хочет видеть, слышит то, что хочет слышать. (Эл Райт. Позиционирование: Битва за умы).

Обязательно поспорю с тобой на этот счет в той теме smile
PM WWW ICQ   Вверх

Дата 23.9.2007, 00:27 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата
dm9 ****   Репутация: 29  Всего: 137 
Главное - не скатиться до споров, основанных на различной терминологии... 

smile
PM MAIL ICQ   Вверх

Дата 23.9.2007, 00:56 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата
DezmASter ***   Репутация: 2  Всего: 109 
dm9, точно smile
PM WWW ICQ   Вверх

Дата 10.10.2007, 16:54 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата
megatron *   Репутация: нет  Всего: нет 
Цитата

Давайте поразмышляем, какие раздражители сильнее всего действуют на человека?
1. Звук
Лично я категорически не приемлю звуки на сайтах, они меня вводят в заблуждение и оттягивают внимание на себя.

Тут я не согласен, опять же все от контента сайта зависит. Если это какой-то офиц.  или очень информативный сайт, где главное в нем именно контент, то звук там безусловно будет лишним. А вот на развлекательных сайтах звук иногда просто добавляет колорит. Самое главное чтобы он не был громким и навязчивым. Где то год назад я забрел на один из сайтов посвященных игре Сталкер, так вот там звук создавал неповторимую атмосферу, даже не хотелось с этого сайта уходить. Так что я бы не спешил со столь категоричными утверждениями.
PM MAIL   Вверх

Дата 31.10.2007, 15:06 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата
DezmASter ***   Репутация: 2  Всего: 109 
megatron, исключения лишь подтверждают правила... Разговор в статье шел именно о контентовых сайтах.
PM WWW ICQ   Вверх

Дата 31.10.2007, 19:00 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата
megatron *   Репутация: нет  Всего: нет 
DezmASter, Хм.. что-то не нашел, где именно Вы тут уточняите, что речь идет именно о контентовых сайтах, да и ссылки у Вас тоже не наконтентовые сайты... Со временем сайты будут больше походить на аркадные игрушки, где много можно что делать, так что, я думаю,  в недалеком будущем исключений станет намного больше.
PM MAIL   Вверх

Дата 3.11.2007, 10:39 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата
Alex13 **   Репутация: нет  Всего: 1 
Спасибо автору, почерпнул для себя кое-что новое. Я, конечно не дизайнер, но все равно было интересно почитать.
PM WWW ICQ   Вверх

Дата 7.11.2007, 06:53 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата
DezmASter ***   Репутация: 2  Всего: 109 
megatron, как же, как же smile 
с каких пор это сайт Google и Хабрахабра стали игрушками аркадными? smile Это вполне себе адекватные сайты, с хорошим информационным дизайном. Не просто хорошим, а проработанным.

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


Alex13, на здоровье smile
PM WWW ICQ   Вверх

 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.1245 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.