GUI, изящным можешь ты не б., но аккуратным б. обязан
Тема удовлетворенности пользователя нынче самая популярная в отечественном юзабилити. И пройти мимо я не могу, тем более в блоге о последних тенденциях в юзабилити.
После многочисленных теоритических дискуссий на тему удовлетворенности пользователя, инициированных Дмитрием Павловым в статье Миф о юзабилити (продолжение здесь), было очень приятно увидеть сугубо практическое руководство Владислава Головача под названием Из грязи в князи. Три правила дизайна элегантных интерфейсов, которое как раз и позволяет увеличить эту самую удовлетворенность на практике.
Три правила
В этой презентации Владислав рассказывает о трех правилах, применяя которые можно сделать элегантным любой интерфейс:
1) Все размеры и все пропорции должны быть взаимосвязаны.
2) Заголовок экрана/страницы должен быть: а) визуально значимым и разборчивым; б) кратким и информативным.
3) Фон должен быть или белым или черным (исключение – для книг или блога Guicci, ориентированных на продолжительное чтение :)
По сути Владислав описал словами то, что грамотные дизайнеры испокон веков делают на автомате, но иногда забывают, как пишет Владислав, из-за стремления к красоте и, как следствие, невольного игнорирования таких мелочей, как выравнивание, паузы и т.д.
Элегантность + Аккуратность
Практически каждая экспертная оценка, которую я делаю, начинается со скриншота главного экрана программы или страницы сайта, где я при помощи красных, жирных линий отмечаю неточности с выравниванием и паузами. Далее я вставляю скриншот или ссылку на прототип, в котором тот же самый интерфейс перерисован с учетом Правила 1. В сопроводительный текст я обязательно включаю, причем несколько раз, слово неаккуратно, потому что считаю интерфейс, в котором нарушено Правило 1 неаккуратным и небрежным (а 2 правило, на мой взгляд, лежит в плоскости контента, а не визуального восприятия). Неэлегантно – это очень мягко сказано, куда как эффективнее по степени воздействия на заказчиков или на их программистов звучат слова неаккуратно или небрежно.
Давайте сравним:
АККУРАТНЫЙ лат. точный, верный; – вещь, тщательно, искусно и чисто обделанная;
Элегантный (франц. élégant), изящный, изысканный.
Элегантность для интерфейса, на мой взгляд, штука опциональная, необязательная, а вот аккуратность – must have. “Изящным можешь ты не быть, но аккуратным быть обязан”. И еще, когда я говорю или пишу “элегантно”, я обращаюсь к правому полушарию заказчика, к его чувствам, а когда я употребляю “аккуратно”, я бью по левому полушарию, по рассудку. А достучаться очень хочется, потому что нужно сделать продукт клиента чуточку более выгодным, за счет таких вот “мелочей”. И теперь, после презентации Владислава, я начну использовать “элегантность” вкупе с “аккуратностью”!
Почему интерфейсы получаются неаккуратными?
Владислав приводит следующие причины:
- При разработке интерфейсной графики думают прежде всего о красоте. Как уже упоминалось, красота редко является абсолютной (так, представления о красоте у увлеченных читателей альманаха Товары и цены редко соответствуют представлениям тех же дизайнеров). В результате, в погоне за выполнением призрачной программы-максимум, забывают о программе-минимум.
- Большинство интерфейсов все-таки разрабатываются вообще без участия дизайнера. Способность же программиста делать привлекательные интерфейсы сильно базируется на его культурном уровне, а этот уровень очень разный (я исхожу из предположения, возможно, неверному, что хорошему программисту не обязательно иметь высокий культурный уровень, но дизайнеру, чтобы стать таковым, его таки приходится набирать). Кроме того, программист не обязан думать о эстетике, ему бы баги выловить; т.е. спрашивать с них лишнего мне кажется непродуктивным.
- Существует устойчивое мнение, что интерфейсу вообще привлекательность не нужна, она, де, лишняя. Соответственно, о ней и не думают.
Я хочу добавить еще одну причину, с которой раньше мне приходилось очень часто встречаться на практике. Представьте себе веб-студию с хорошо организованным процессом разработки (без юзабилити): сбор и анализ требований, прототипирование, написание функциональной спецификации, дизайн, верстка, создание шаблонов на базе сверстанных страниц, программирование бизнес-логики на базе шаблонов, тестирование функциональности, наполнение контентом, установка на production-сервер и, наконец, поддержка.
Дизайнера обычно подключают к проекту лишь единожды, в самом начале, после чего он уходит на другие проекты, а программисты/тестеры/менеджер проекта остаются один на один с дизайном. Если учесть, что универсальных правил или требований на оформление страниц сайта у разработчиков и тестировщиков нет, то нетрудно представить себе, какой дизайн получается на выходе. Ситуацию отчасти может спасти рецензирование/проверка результата дизайнером, однако такая экспертная оценка не гарантирует того, что все страницы сайта будут исправлены, просто потому что программисты и тестеры заняты немножко другим (см. также причину 2 по версии Владислава).
Вот и приходится начинать экспертную оценку со слов “неаккуратно” и “неэлегатно”.
Выводы
Презентация Владислава Головача содержит банальные, для грамотных дизайнеров, вещи. Но нацелена она не них, а на технарей (к коим отношу себя и я), чей глаз откалиброван по другой шкале :)
ps. Приношу извинения за сокращения, которые я сделал в заголовке заметки: это как раз тот случай, когда красота (заголовок в одну строку) берет верх над удобством.
О статье
- Автор статьи:
- Александр Сергеев.
- Статья была опубликована
- 27.4.2007
- в рубрике:
- Дизайн.
- Cтатью открыли 5,894 раза.
- Юзабилити - актуально. Поэтому
- Блог Guicci регулярно читают:
- [?]
- Axure. Урок 1: создаем глобальное меню сайта на закладках
- HTMLayout: Web 2.0 пришел на десктоп!
- Google Analytics. Часть 6: Откровение для шареварщика
- Убеждающий дизайн или как из посетителя сделать покупателя
- Ищем php-программиста в Минске
- Как понять пользователя. Часть 1.1 Почему он молчит?
- Snap Preview Anywhere - моментальный снимок сайта
- GUI.RU - Хроники Юзабилити
- Juras Vetrau. Блог о веб-разработках
- О юзабилити веб интерфейсов
- Блог студии Turbomilk - графика для UI
- Микромаркетинг
- Записки шареварного маркетолога
- Блог о web-разработке и юзабилити
- Сообщество специалистов по юзабилити и user experience Беларуси
- ICQ: 368-980-583
- E-mail:
- Форма обратной связи
Самые популярные статьи
Реклама
Стоит также почитать
Контактная информация
Заказ
-
27.4.2007
Неплохая презентация, в тоже время не могу согласиться про фон (пожалуй, это самое большое несогласие)
Дизайнеры Apple сделали фон текстурным нарочно, ибо глаз привыкает скользить по нему и больше обращаем внимания на нетекстурные элементы (контролы в данном случае).
Белый фон безобразен своей яркостью, сильным контрастом.
Черный фон — не сильно эстетично, если мы, конечно, не делаем игру для готичных подростков.Так что категоричные заявления, что серый фон для неудачников, я считаю неудачной шуткой.
Мое искреннее убеждение, что в интерфейсе надо использовать натуральные цвета, те, которые встречаются в природе. Они больше нравятся пользователям.
Как известно, вещи, которые нравятся больше, лучше работают. -
27.4.2007
а в книгах белый фон тоже используется. +черный шрифт. потому что глаза так меньше устают – контраст хороший. а вот блог Guicci использует светло-серые буквы на почти белом фоне, что затрудняет их различение :)
-
28.4.2007
Дмитрию Павлову:
В книгах используется белый фон. Но бумага, в отличии от монитора, не светится. -
3.5.2007
В блоге Guicci мало того, что цвет шрифта малоконтрастен, здесь еще и text size прибит гвоздями. Мол, хотите читать – ломайте глаза. Очевидно, такое решение кажется автору и изящным, и элегантным…
-
4.5.2007
Коллега,
а правда, что шрифты на вашем сайте не масштабируются? -
4.5.2007
Guicci? Прекрасно масштабируются.
-
4.5.2007
“Так что категоричные заявления, что серый фон для неудачников, я считаю неудачной шуткой.”
Абсолютно верно, коллега.
Причины, которые приводит автор в оправдание,
вовсе не коррелируют с его выводом.Цитата из автора:
————————
Тому есть много причин,
но главными из них
следует признать:
• Недостаток контраста
у интерфейсов с фоном
• Потерю выделительного
цвета
• Избыточность фонового
цвета вообще
• Отсутствие в природе
монотонных цветов.
———————–и чо?
-
4.5.2007
“Guicci? Прекрасно масштабируются”
под ie6?
не заметил… -
4.5.2007
Под FireFox 2.0.0.3
Под Opera 9.20IE6 – не масштабируется… Баг IE6 :)
-
4.5.2007
“IE6 – не масштабируется… Баг IE6″
Блестящий аргумент, коллега.
Только вряд ли это оправдание собственной лени.Вон, у Головача на сайте все масштабируется нормально…
-
4.5.2007
Высказывание Головача по поводу серого фона — это болезнь юзабилистов, синдром Нильсена :-) Открыл и описал этот синдром доктор Алексей Новиков аж в 2005 году.
Основные симптомы таковы: категоричность суждений, навешивание ярлыков вроде «неудачники» и все возрастающий уровень абстрактности суждений.
Конечно, можно долго рассуждать по поводу оптимаьного фонового цвета, про чистоту тонов и т.п. Но вот такая штука: от серого фона не воротит, а от ярко-белого воротит. И от черного с белыми буквами, уж тем более.
А вот еще такая штука: почему-то комментарии в этом блоге читать гораздо комфортнее, чем основной текст. Размышления об удобочитаемости стоит приводить в удобочитаемом виде.
И еще, не стоит бояться делать заголовок покрупнее и в две строки. Берите пример с меня или со «Взгляда».
-
4.5.2007
Я думаю, что “серый – для неудачников” – это такая “замануха”, “провокация”, чтобы стимулировать обсуждение статьи :)
Кстати, я померял контрастность комментариев и текста статьи. Уровень контрастности у комментариев в три раза выше нежели у текста статьи…
-
4.5.2007
Окей, померяли контрастность у текста :-) Но лучше бы увеличили ее :-)
Не помню кто, кажется Росс Перо, выступая перед учениками одной крутой бизнес-школы в США, сказал: «Вы “сканируете окружающую среду”, в то время как мне достаточно просто выглянуть в окно». Так и тут: даже замерять не надо. Достаточно просто посмотреть глазом и сравнить.
-
7.5.2007
“В IE6 – не масштабируется… Баг IE6″
Друзья, о каких багах Вы говорите? Указываем шрифты в “em”, а не в “px”, ─ и все везде прекрасно работает.
-
7.5.2007
Так ведь и укзааны-то в “em” – вы посмотрите css… :)
-
10.5.2007
“Я думаю, что “серый – для неудачников” – это такая “замануха”, “провокация”, чтобы стимулировать обсуждение статьи :)”
А я думаю – признаки звездной болезни.
Формат PDF, в которм представлена статья – самый неудобный именно для обсуждения. -
10.5.2007
Да и PPT тоже не очень подходит для обсуждения.
Вот если бы выложить презентацию в SlideShare (я писал раньше об этом сервисе), то можно было бы пообсуждать каждый слайд.
Добавьте ваш комментарий
XHTML: Вы можете использовать следующие тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
О Проекте
Проектирование интерфейсов и юзабилити-тестирование в рамках компании HumanoIT Group очень увлекательное занятие, но иногда “забываешься” и уходишь с головой в работу… А тем временем в лабораториях известных университетов и компаний инженерные психологи, проектировщики взаимодействия, дизайнеры придумывают новые интерфейсы и формы взаимодействия человека и компьютера.
Читайте в этом блоге о новых тенденциях в красоте, удобстве и функциональности пользовательских интерфейсов.
С Уважением,
Александр Сергеев
Последние статьи
- 15.6 Sharepoint – a freakin’ glorified file server
- 10.6 Лучшие интранет-решения 2009 года (по версии Якоба Нильсена и co)
- 7.6 10 гуру нового мира по версии журнала Fortune
- 18.5 Количественная оценка качества e-commerce сайтов
- 4.3 Web 2.0 для е-commerce
- 3.3 Юзабилити как гормон роста социальной сети
- 2.3 Итоги конференции “Usability и дизайн интерфейсов” в Минске
- 22.9 Работа в HumanoIT Group. Вакансия дизайнера интерфейсов в Минске
- 11.7 Ищем php-программиста в Минске
- 6.4 Axure. Урок 1: создаем глобальное меню сайта на закладках
Рубрики
- Дизайн (9)
- Инновации (18)
- Инструменты (16)
- Интранет-решения (2)
- Новости (4)
- Психология (13)
- Разное (9)
- Юмор (6)
Комментариев: 17
Добавить комментарий | комментарии по RSS | trackback URL