Автор статьи: Алексей Молов

>

Улучшаем интерфейс (почтовая форма)

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

Часто плохой интерфейс следствие бесплатного распространения программы. именно такую программу я и хочу рассмотреть, с примером улучшения. Программа называется Open Web Mail (www.openwebmail.org). Программа многофункциональна, бесплатна, имеет широкие настройки и серьезную защиту. Ее часто используют хостинг провайдеры. Несмотря на все технические преимущества, программой практически невозможно пользоваться по-человечески, а точнее ее интерфейс анти-человечен. Хотя в нем и существует возможность смены скинов, существенно это дело не меняет. К тому же в интерфейсе есть практически все типичные ошибки аналогичных программ, а также любезно представлены критические ошибки.

Самое удивительно, это то, что придумывать в почтовых веб-интерфейсах ничего нового не нужно. Достаточно посмотреть их у известных служб, например, Яндекс, Майл.ру, Рамблер, а также на иностранных почтовых сервисах.

итак, из всего интерфейса как одну из наиболее значимых форм я выбрал форму создания и отправки письма. Скин интерфейса неоригинальный и переведен на русский, но это ничего не меняет. А вот сама форма:

Теперь по пунктам недостатки и проблемы:

1. Форма перенасыщена избыточными функциями. Например, «Приоритет» — функция используемая крайне редко.
2. Иконки неинформативны. В частности, что означает иконка со стрелочкой вверх понять непросто. Обозначает она возвращение в папку «Входящие». Почему было не сделать ее привычно в виде стрелки «back», загадка. Понять, что означает иконка со стрелкой «вправо» задача еще более сложная:



На самом деле ее функция: «Обновить форму». Зачем ее обновлять? Кстати ее можно было сделать хотя бы вот так:



3. Сугубо на мой вкус иконка «Адресная книга» не красива, но требовать этого от бесплатной программы, видимо не стоит.
4. А вот шедевр — пиктограмма «Виртуальный диск»:

   

5. Рядом с формой выбора файлов для вложения существует кнопка «Добавить», подразумевает она добавление нового поля для выбора все тех же файлов. решение с таким названием неэлегантно, неинформативно и во многом добавляет еще больше сложности в прочтении всей формы. Из серии «Пока не нажмешь, не поймешь».
6. Поле «Отвечать сюда», вызывает простой вопрос: «Куда?». У среднестатических пользователей это поле будет вызывать именно этот вопрос и как оно будет заполнено, можно будет узнать только, жестко проверяя правильность ввода с выводом сообщения об ошибке. Функция избыточна.
7. Рядом с полем «Тема», чекбокс «Сохранить копию». Весьма не удачное решение, вызывающее такие вопросы: «Тему письма как копию?», «Какую вообще копию?».
8. Далее идет поле кнопок, на которое без ужаса в глазах взглянуть невозможно. Как можно было кнопку «Отправить» поставить сверху тела письма? Тоже касается и кнопки «Сохранить как черновик».
9. Назначение кнопки «Отмена» понять проблематично.
10. Переход от текстового формата к html-формату неочевиден. Выпадающий список решение не совсем удачное. Вообще, это решение приводит лишь к одному: пользователь очень не скоро узнает, что есть такая функция, как написание письма в html-формате или даже никогда не узнает. Если ему такая функция понадобится, возможно, придется смотреть файл помощи.
11. Назвать кнопку проверки орфографии «Орфография» — это преступление, особенно учитывая рядом выпадающий список с выбором языков для проверки. Причем, это нарушает известное правило создания интерфейсов: «Названия командных кнопок, используя глаголы».

А теперь как можно было сделать:

По пунктам опишу решения по улучшению интерфейса:

1. Переименовываем «Создать сообщение» на более информативное «Новое сообщение», как вариант &laquo
   ;Новое письмо».
2. Иконку «Входящие» заменяем одноименной ссылкой и добавляем ссылку на «Адресную книгу». раньше эта ссылка находилась вне формы, в отдельном меню.
3. Иконку «Обновить форму» убираем.
4. Все избыточные функции прячем, а для раскрытия создаем кнопку «Дополнительные возможности». Как вариант, можно эту кнопку и не делать.
5. Снижая скорость чтения формы, убираем иконку «Адресная книга» и заменяем ссылкой. Как вариант, делаем красивую, информативную иконку и добавляем опять же ссылку вида «Адреса», «Адресная книга», «Контакты» и т.п.
6. Выбор формата письма делаем очевидным в виде ссылок text и html.
7. Проверку орфографии снабжаем пояснительным текстом, а кнопку заменяем очевидным глаголом «Проверить».
8. Ниже текстового поля обозначаем цветом группу выбора вложенных файлов. Иконку «Виртуальный диск» меняем на ссылку.
9. «Сохранить копию письма» и «Подтвердить прочтение» ставим на очевидное, последовательное в чтении и логичное место.
10. А кнопка «Отправить» теперь заняла свое законное место.

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

Первоисточник — www.lessio.ru