Акция «Интерфейс=понимание»: первые результаты работы

imageДоброго дня, друзья!

Меня зовут Бьорн Лундстрем, и я руковожу командой дизайнеров клиентских приложений (CAUID team) в рамках акции «Интерфейс=понимание».

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

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

Orga


Картинки кликабельны

image image
Рассказывает Питер Вельдерсон:

«Идея комплексного органайзера для секретаря и руководителя вовсе не нова. Я встречал подобные программы и в конце девяностых, и в начале двухтысячных, когда сайты вроде softpedia стали объектами массового внимания начинающих разработчиков.

Тем не менее, в этой концепции есть то, что принципиально отличает её от всех других — весьма привлекательный набор функций, которые отлично интегрируются в рабочий цикл руководителя — календарь, почтовый и RSS-клиенты, CRM-подобная система контактов, и т. п.

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

Моя основная работа над этим проектом будет заключаться в… максимальном объединении функций. С одной стороны, это упростит восприятие органайзера, с другой — увеличит итоговую продуктивность.

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

Работу над юзабилити я решил начать с вкладки „Почта“ — здесь модификации наиболее очевидны. Я избавился от вкладок второго уровня „Новости“ и »Факсы", объединив все три сущности на одной вкладке "Почтовый ящик".

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

Учитывая то, что не каждый менеджер или секретарь может позволить себе монитор с большим разрешением, при реализации окна сообщений я решил опираться на опыт Mozilla Thunderbird, а не Outlook. Список сообщений, таким образом, расположен сверху, а окно просмотра сообщения — непосредственно над ним. Над списком сообщений я расположил небольшую, но функциональную панель, на которой, в зависимости от выделенного элемента, будет отображаться список действий".

Chameleon Windows Startup Manager


Картинки кликабельны

image image
Рассказывает Сванте Стрикхольм:

«Вероятно, мне повезло в большей степени, чем другим разработчикам, так как Chameleon Startup Manager — достаточно продуманная программа. Конкуренция на рынке конфигураторов автозагружаемых приложений под Windows заставила автора продумать и юзабилити, и нюансы оформления.

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

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

В новом дизайне я решил пойти на необычный и спорный ход — несколько изменить новейшие метафоры оформления Windows и добавить к ним иконки с закруглёнными краями „а-ля iPhone“.

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

Аналогичному разграничению элементов подверглись и боковая панель (там дополнительные функции вынесены в меню „More...“), и список приложений (там второстепенные значения выглядят немного светлее). Текстовые поля в нижней панели были упорядочены, благодаря чему туда поместился дополнительный SpinEdit для настройки задержки.

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

CodySafe


Картинки кликабельны

image image
Рассказывает Туве Сиверс:

«Четыре года назад мне подарили „флэшку“ на 512 мегабайт, чему я была несказанно рада. Тогда это ещё было редкостью. Сегодня любого человека, связанного с IT, сложно представить без flash-накопителя. Такая распространённость двигает рынок portable-приложений к небывалому развитию.

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

В качестве первого шага я решила обновить дизайн самого меню — на мой взгляд, он был слишком перегружен метафорами Windows Vista — излишними градиентами, выпуклостями и эффектами „стекла“. Я немного уменьшила меню в ширину и привела его в большее соответствие с метафорами Windows 7. При отрисовке с нуля потерялся объём, над этим ещё предстоит работать. Цвет заголовков пунктов был изменён с чёрного (контурная обводка показалась мне ужасной) на белый с лёгкой тенью.

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

Вопреки метафорам Windows 7, я не стала избавляться от иконок для правой части меню, а использовала их системные аналоги, более приятные и сбалансированные по цвету. Для отрисовки кнопок извлечения и остановки диска мне пришлось вернуться к метафорам Vista. Я сделала градиенты кнопок менее агрессивными.

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

От руководителя команды:


Наша акция продолжается. Если вы хотите заказать дизайн или редизайн интерфейса клиентского приложения у нашей команды и получить скидку в 40% от рыночной стоимости, напишите заявку в свободной форме на interface[at]iunderstand.ru; для заказа юзабилити-тестирования отправьте заявку в свободной форме на usability[at]iunderstand.ru

С уважением,
Бьорн Лундстрем.
+1
25 ноября 2009, 15:11
6
revazov –0,5

комментарии (42)

–1
SynteZZZ #
Хватит перерисовывать стандартные контролы!
+1
revazov #
В дизайне клиентских приложений мы главным образом опираемся на стандартные контролы и стайлгайды операционных систем. Если приложение выглядит так в Windows 7, это не значит, что оно будет выглядеть также и в Windows XP. Мы стараемся учесть этот аспект.

Тем не менее, ряд отступлений от стайлгайдов может быть полезен в целях юзабилити. Ни одно приложение от Microsoft не соответствует своим же предписаниям. То же можно сказать о приложениях сторонних разработчиков под Mac.
0
SynteZZZ #
Скроллбар, чекбоксы в этом интерфейсе показаны под какой ОС? Ни под 9x, ни под XP, Vista, 7 не подходят.
Дело не в формальности гайдлайнов. Дело в том, что для того и разрабатывались стандартные элементы управления, чтобы пользователь не задумывался как он себя поведет и как он должен выглядеть.
Раз контрол перерисован — значит программистом он будет реализован с нуля, значит его поведение, с большушей долей вероятности, будет отличаться от поведения стандартного.
Сомневаюсь что на таком скроллбаре, к примеру, будет реализовано редко используемое, но стандартное поведение — меню по правой кнопке.
0
revazov #
Само собой, всё это мне понятно.

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

Я не знаю, как это было в действительности, но вполне допускаю, что разработчик использовал стандартный png чекбокса, который был под рукой.

Scrollbar, насколько я вижу, используется из контролов для MS Office 2010, которые уже доступны для Visual Studio и, вероятно, будут портированы в другие среды разработки.

На выходе мы проверим такое соответствие для всех проектов, это я могу вам обещать.
0
SynteZZZ #
Да, действительно от 10-го офиса, не признал.
Тогда приношу свои извинения — наболело.
0
revazov #
Приношу извинения за уже третий пост за последнюю неделю. Тем не менее, думаю, что эта информация может быть полезна многим пользователям. Вполне возможно, что весь процесс коммуникации будет перенесён на iunderstand.ru, а на Хабре мы сохраним общение в виде еженедельного подкаста.
+1
dohlik #
>> Приношу извинения за уже третий пост за последнюю неделю.

Вы просто ангел, по сравнению с сегодняшней кучей спама в корпоративном блоге Asus. :)
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
+1
revazov #
При всём уважении, не понимаю одной простой вещи: почему со столь негативным мнением вы всё равно продолжаете читать наши посты. Получается как в плохом анекдоте про ёжиков и кактус.
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
0
not_ice #
а что, неплохо получилось по-моему :)
–1
revazov #
Спасибо, наши разработчики стараются.
Всё только начинается.
0
revazov #
Господа минусующие, пожалуйста, предлагайте конструктивную критику. Это тоже одна из дополнительных целей нашей акции.
–1
demonstr #
Быть может, стоит дать более развёрнутый обзор изменений? А то, честно говоря, ожидал поболее чем картинок 150*170.
+1
revazov #
Картинки кликабельны. Изменения перечислены ниже.
НЛО прилетело и опубликовало эту надпись здесь
+1
revazov #
Уважаемый, вы неисправимы.
P. S.: Картинки кликабельны.
НЛО прилетело и опубликовало эту надпись здесь
0
revazov #
Возражу:

— Во-первых, вы пытаетесь адресовать этот вопрос к скетчам, у которых сглаживание вообще не имеет никакого отношение к системному, и задаётся Photoshop'ом (или аналогичным ПО).

— Во-вторых, шрифт Segoe UI является системным в Windows Vista и 7 (в Windows 7 к нему добавляются новые начертания, Semibold и Condensed). Таким образом, их использование обусловлено стайлгайдом.

— Предполагается, что программы из скетчей 2 и 3 запущены и работают в среде Windows 7, а программа из скетча 1 работает в среде Windows XP при установке Arial как системного шрифта.

Таким образом, всё довольно логично. Более того, вы, вероятно путаете конструктивное и субъективное.
НЛО прилетело и опубликовало эту надпись здесь
0
revazov #
Вы же порете совершеннейшую чушь и отсебятину, в которой ещё и пытаетесь меня обвинить! Неужели вы этого не понимаете?

Что же, по-вашему, все новейшие программы и операционные системы от Microsoft — отсебятина? Что, вместо приятного и удобочитаемого Segoe в Windows Vista и 7 мы должны принудительно использовать некрасивую Tahoma и не предназначенную для интерфейсов Verdana?

Есть — я не спорю — случаи, где ситуацию отключенного сглаживания можно и нужно предусмотреть — к примеру, бухгалтерский софт. Но и в этом случае субституцию следует проводить ТОЛЬКО если программа определила отключенное сглаживание.

НЛО прилетело и опубликовало эту надпись здесь
+2
nnknows #
Нравится. Продолжаем ждать письмо с предложением. Кстати, в этом посте скидка с 30% поднялась уже до 40% =)
0
revazov #
Здравствуйте, отпишите мне личным письмом на Хабр адрес вашего сайта и исходный текст письма.

Дело в том, что на некоторые адреса по техническим причинам не отправляются ответные письма. Я отвечу вам личным сообщением.
НЛО прилетело и опубликовало эту надпись здесь
0
drunas #
С нетерпением жду своих скетчей, эти были готовы в течение суток, а что со второй очередью?
0
revazov #
Думаю, завтра к вечеру мы опубликуем рассказ и о «второй очереди»
0
drunas #
ждём с нетерпением, видимо там больше работы )
0
drunas #
Что ж, видимо вечер будет немного позже 21:00
так что не спешите, уж лучше в понедельник)
0
Zloba #
Чтобы оценить улучшение юзабилити, напишите, пожалуйста, про пользователей каждого из продуктов, на кого расчитан продукт, основные функции, какие требования к продукту предъявляют пользователи, типичные сценарии их работы. Был ли проведен какой-то предварительный анализ пользователей их пожелания? или переделки исключительно экспертное мнение исполнителя?
Не могли бы вы выкладывать «было» «стало» на одном экране для простоты оценки.
0
revazov #
Спасибо за комментарий. Думаю, что в следующем посте мы так и поступим.
0
danger4k #
1. Продинамили сроки отбора. (по-русски)
2. Продинамили сроки представления обещанной личной презентации. (по-русски)
3. Продинамили сроки обещанного представления скетчей и предварительных эскизов выбранных проектов. (по-русски)
4. Продинамили сроки обещанных уникальных предложений проектам, не отобранным в первом туре. (в личку пришло: с почтой тратата… продублируйте в личку...) (по-русски)
5. Продинамлены сроки отправки уникальных предложений проектам, не отобранным в первом туре в личку на хабре (по-русски)
6. Пошлю я вас тоже по-русски.

P.S.: я не очень щедрый клиент но 70-100 т.р. за продуманное юзабилити мог бы выложить… устал я работать с «русскими» дизайнерами, для которых основной целью является напихать побольше рюшечек. Увы…
0
revazov #
Добрый день.

1. Сроки отбора были закрыты вовремя.
2. Скетчи были предоставлены сразу после получения согласия от руководителей проектов.
3. Личные предложения были разосланы на 85% в течение двух дней с момента оглашения результатов.
0
RiderSx #
Я прождал 5 дней, ага.
0
revazov #
Добрый день!

— Наша рассылка не затронула примерно 5% почтовых адресов, по техническим причинам на них не проходили письма. Пожалуйста, отправьте текст вашей заявки мне в личное сообщение, мы отправим вам индивидуальное предложение.

— Поищите наше письмо в спаме, на определённом количестве адресов оно также заносилось в «нежелательную почту».
0
amplitudo #
А все да? Юзабилити уже не равно понимаю? Закончилось все на словах?
0
maashaa #
Ждём, когда Ваша команда доберётся до нас. :-)
0
vikingkom #
А что с проектами по юзабилити? Мы не получили от вас никакого ответного ответа, да и не видел поста со списком проектов.
Вы планируете делать проекты по юзабилити или только по интерфейсам?
0
drunas #
Обещали в конце прошлой недели, но в пятницу через почту выяснилось что конец недели — это воскресенье. На дворе уже понедельник, даже снег за окном появился, а организаторы не чешутся даже (((
0
copylove #
Уважаемые авторы это поста — Бьорн, Туве, Питер и Сванте — это ваши настоящие имена или творческие псевдонимы?

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.