Рубите с плеча.

Первое оружие для борьбы с злом сложности – топор. Исследования показали, что 80% пользователей используют лишь 20% функционала програмного обеспечения. А всякие штучки не только увеличивают время разработки, но и отнимают, а не прибавляют ценности делая приложение сложнее в использовании. Это приложения, которые стараются сделать все, вместо того, чтобы стараться делать что то одно хорошо. Успешное приложение, это узконаправленое приложение: решает одну проблему, но на отлично.
Лучшим способом получить узконаправленое приложение – урезать функционал. Когда решаете нужен ли вам определенный функционал, ответом по умолчанию должен быть – “нет”. Создайте настоящую конкуренцию между функционалом, только самый нужный будет включен. Если он не помогает большинсву пользователей решить свои задачи, тогда он должен быть исключен. Можете говорить, что махать топором – это просто, зато когда клиенты начнут петь диферамбы о том как удобно и просто ваше приложение, можете оставить себе эту благодарность.

Спрячте сложность.

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

Когда мы делали редизайн КМС, мы не могли избавится от функционала пакетного редактирования.В предыдущей версии КМС для этого была отведена целая колонка на экране. Это занимало около 30% поверхности экрана, однако, как оказалось, редко кто использовал данный функционал. Наше решение было в отображении одной иконки, рядом с которой выводилась цифра, показыващая количество элементов в группе. при нажатии на пиктограмму модально отображался список элементов. Это экономит кучу места и не отвлекает пользователей от их задач.

Если говорить словами гуру дизайна Джона Маеда – “Когда маленький и скромный объект, превосходит все наши ожидания, это не только удивительно, но и приятно”

Уменьшайте визуальный шум.

Итак мы обсудили урезание и сокрытие функционала. Но уменьшение сложности “восприятия” ничуть не менее важно. “Количество визуального шума в интерфейсе, сильно осложняет восприятие последнего.” – Брендон Волкин. Сведение визуально зашумленности к минимуму сделает интерфейс кажущемся проще для восприятия. Двумя основными инструментами для уменьшения шума явлются: свободное пространство и контраст.

Свободное пространсво, по определению марка Болтона, это “пространство между элементами в композиции”. Свободное пространство должно быть инструментом по умолчаю при разметке. Одно правило: никогда не вводите дизайнерски элемент, если вы можете получить тот же результат используя свободное пространство. Вы будите приятно удивлены тем, как много можно сделать используя свободное пространство.

В то время как свободное пространство должно быть в изобилии, контрастом лучше не злоупотреблять. Дизайнер-теоретик Эдвард Тафт, автор понятия “наименьшей эффективной разницы”, призывает дизайнеров к использованию небольших визуальных отличий требуемых для эффективной подачи идеи. Фактически это означает: подчернуть то, что важно и затенить все остальное.

Для илюстрации обеих идей, посмотрите на ценовую таблицу с TypeKit и ее измененную версию:

Измененная версия.

Оригинал

Вы наверное заметили, что в измененной версии присутсвует темная “тяжелая” рамка. Какая из версий менее зашумлена? (Ответ, естейственно, оригинал). Много свободного пространства и слабый контраст уменьшают визуальный шум и делают ваше приложение проще.

Уменьшайте, используйте повторно.

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

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

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

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

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

Заполненная пустота.

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

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

Стоит повторить: не забывайте о ситуации с отсутствием содержимого!

Примеры.

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

Invoice Machine – это минимализм в интерфейсе в его лучшем виде. Приложение уделяет внимание деталям, а не словам.

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

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

У Ballpark четкие элементы управления и незагроможденный интерфейс.

Krop, по сути, состоит из двух полей. Он позволяет буквально за пять секунд найти нужное объявление.

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

Screenr является очень удобным приложением для записи скринкастов и дальнейшим размещении их на Twitter.

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

В заключение.

Во-первых уменьшайте сложность за счет устранения лишнего функционала, а то что не сможете устранить – спрячте. Во вторых уменьшайте сложность восприятия путем сведения к минимуму зашумленности и повторного использования элементов. И наконец не забывайте о ситуации отсутсвием контента.
Сведение сложности к минимуму, позволит пользователям быстрее ознакомиться с вашим приложением, использовать его более эффективно и при этом оставаться довольными. Как сказал джазовый музыкант Чарли Мингус: “Сделать из простого сложное – обычное дело, а сделать сложное простым – творчество”.

Оригинал статьи взят с: http://www.smashingmagazine.com/2009/10/07/minimizing-complexity-in-user-interfaces/

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

Задачи

1. Дать возможность в одно действие переключать страницу.
2. Удобный переход на последнюю и первую страницу.
3. Правильное переключение на следующую и предыдущую страницы.
4. Удобочитаемый вывод списка страниц.
5. Выделение активной страницы.
6. Сделать всё вышеперечисленное по возможности в простом и симпатичном виде.

Решение задач:

Перед началом решения вышесказанных задач нужно определиться с тем, что нам нужно улучшать. Для этого перейдем на сайты, у которых есть навигация по страницам, и этих страниц явно больше 100. Для того, чтобы их найти, достаточно перейти в google и набрать поисковый запрос вида «719 720 721». После этого выбираем наиболее интересные примеры и изучаем их.

Я выбрал в качестве примеров недоработанной навигации по страницам следующие сайты:

1. PhotoUA
Украинское агентство цифровой фотографии создано с целью предоставления цифрового новостного фото.

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

2. EuroLine
Довольно известная грузинская авиакомпания EuroLine предоставляет перелеты в Европу и Азию.

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

3. Пресс-КIT
Украинское независимое агенство, предлагающее широкий спектр информационных, рекламных услуг, и разнообразные возможности фото-службы.

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

4. Форум посвященный Гарри Поттеру.
Кому-то может показаться смешным то, что я выбрал в качестве примера этот сайт, но должен вас разочаровать: выбрал я его потому, что он имеет огромное количество страниц.

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

5. Фишки.Нет
Аннотации за ненадобностью тут не будет. Все знают, что это за сайт и с чем его едят.

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

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

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

Решить эту ситуацию довольно просто: либо выпадающим списком с прокруткой (прокрутка для того, чтобы список был меньше чем 2000px при 1000 страницах), или же перемоткой списка движениями мыши. Тут всё зависит от личных предпочтений дизайнера. Лично я предпочитаю движения курсором. Что я подразумеваю под этим — смотрите на картинку сверху.

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

При этом желательно эти ссылки выводить полярно: “Первая” справа, “Последняя”слева .

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

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

Лучше всего совместить с помощью типографического форматирования стрелочку (они есть почти во всех стандартных шрифтах Windows) и надпись. Т.е. вот так: ← Следующая | Предыдущая →

Удобочитаемый вывод списка страниц
Тут всё просто. Не стоит показывать массив из всех страниц сайта сразу. Пример сайта Фишки.Нет ясно показывает нам, что навигация по такому списку — не из легких. Лучше всего выводить 5-7 страниц, которые находятся по соседству.

У некоторых людей существуют трудности с восприятием списка, если в нем находится больше семи элементов, поэтому выводить более семи соседних страниц не стоит.

Выделение активной страницы

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

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

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

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