Главная Услуги Работы Персона Юзабилити анализы
IMG тел. +7(98I) 7608865
Декоративные и значимые элементы в дизайне интерфейсов




ПОИСК по сайту


    Полный список статей
/ дизайн интерфейсов / Версия для печати / translit / абракадабра :-)


<-предыдущая следующая ->

 
  google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru smi2.ru twitter.com Яндекс закладки text20.ru RuSpace RuSpace toodoo

Как дизайнеры интерфейсов мы хотим, чтобы наши работы хорошо выглядели и были понятными. Каждый элемент на экране должен ласкать взор, и в то же время, интерфейсы — это не просто объекты. Они должны работать. Интерфейсы должны представлять информацию и ясно указывать возможные направления действий. Эти две стороны — сексапильность и функциональность, привлекательность и простота, оформление и значимость — они часто сосуществуют у опытного дизайнера. Но по-прежнему существует опасность конфликта между тем, как это по нашему мнению должно выглядеть и тем, как это будет воспринято пользователем (им бы только о клиентах (customers), нет чтобы о людях подумать… — мысль вслух пер.). Недавно я обратил внимание на такого рода противоречие между оформлением и значением на сервисе GitHub.

Основная навигация на GitHub


После того как вы авторизуетесь на GitHub, общее навигационное меню появится в правой части заголовка. Навигационный блок обрамлён прямоугольником с закруглёнными углами:

197-github-small
Посмотрите на прямоугольник, который связывает весь блок воедино. У него светло-голубой фон, а вокруг он ограничен рамкой серого цвета. Граница и фон декоративны. Они стилизуют блок и услиливают визуальную привлекательность. Чтобы помочь вам увидеть декоративность этих элементов, я сделал на скорую руку сравнение между оригинальным вариантом (сверху) и новой версией без границы и фона (снизу):

200-github-comparison

Оба варианта приятны глазу и функциональность в них кажется одинаковой. Вы вправе сказать, что разница между ними скорее эстетическая. Но тут есть ещё кое-что. Решение объединить ссылки гораздо глубже. Декоративный контейнер на самом деле меняет значение ссылок и, как мы дальше увидим, приводит к проблеме для GitHub. Чтобы понять причину, мы сначала должны взглянуть на то, как объединение элементов влияет на восприятие дизайна пользователем.

Контейнеры меняют значение объединяемых элементов


Когда вы помещаете ссылку внутрь контейнера, вы предполагаете связь между контейнером и ссылкой. Технически говоря, вы делаете одно составной частью другого. В качестве более привычного примера, взгляните на ссылки редактирования, которые вы часто видите в web-приложениях:

203-edit_example

Две ссылки для редактирования объединены соответствующими контейнерами. Пользователь ожидает, что верхняя ссылка «edit» предназначена для редактирования записи «Michael Bluth», поскольку ссылка находится в той же ячейке, что и имя Michael-а. Сами ссылки «edit» одинаковы. Разницу создают контейнеры.

Так как же это относится к навигации на GitHub? Проблема со ссылкой (“repositories: all”). На GitHub размещены тысячи открытых репозиториев, открытые для всех и каждого. И в то же время каждый пользователь может иметь свои собственные репозитории. И как раз тут мы находим двусмысленность в дизайне их навигации.

Когда навигационный блок обрамлён, ссылка «все» («all») кажется заключённой в рамки активного пользователя. По ссылке вы ожидаете увидеть все репозитории, принадлежащие только этому пользователю.

210-repo-link-user

Сравните это с версией без рамки. Здесь уже не столь очевидно, ведёт ли ссылка «все» к списку репозиториев Michael-а или к основному списку абсолютно всех репозиториев.

211-repo-link-global

Поначалу рамка вокруг блока навигации GitHub выглядела исключительно как вопрос стиля. Теперь мы видим, что эстетические решения могут также воздействовать на понимание дизайна пользователем. В случае с GitHub ожидания созданные обрамлёнными ссылками не соответствуют реальному поведению. Когда вы нажимаете ссылку «all», вы не попадаете на список репозиториев текущего пользователя. Вместо этого вы оказываетесь в основном списке публичных репозиториев всех пользователей. Оказывается, для того чтобы увидеть список репозиториев активного пользователя, необходимо нажать на его имя рядом с аватаром. Мудрено!

Предложения


Как мы могли бы изменить дизайн, чтобы исключить путаницу?

[..] — первый вариант «редизайна», предложенный автором статьи, пропущен, так как откровенно плох, особенно по сравнению с нижеописанным, — прим. пер.

Можно сохранить декоративную рамку оригинала и использовать «авторство» для того, чтобы «перевесить» напрашивающуюся логику:

213-redesign-2

Этот вариант использует 2 ссылки — «все» («all») и «мои» («mine») — для разделения между основным списком всех репозиториев и списком репозиториев, принадлежащих только активному пользователю.

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

habrahabr.ru/blogs/ui_design_and_usability/51177/

Все то в данной статье описано имеет под собой основание называемое мною мультислоностью.

3
Создание эксклюзивных сайтов, юзибилити анализ и бесплатный анализ под запросы основных поисковых машин
Контактная информация :
тел. +7(98I) 7608865

Написать письмо на e-mail
icq 415547094  romverрейтинг на mail.ru сайта romverinbox.ru
© 1997 - 2024 romver.ru

Полная карта сайта Display Pagerank