В данной статье я затрону современные интерфейсы. Не все из них плохие. Но складывается впечатление, что такие титаны создания ПО, как Microsoft и Google, идут неверным путем. И этот путь заведет всех нас в глубокую … ситуацию.
Внимание, много букв!
Идеальный интерфейс не должен отвлекать пользователя от выполнения его задачи. Но сейчас многие пользователи больше тратят усилия на борьбу с интерфейсами. Вот несколько причин этой борьбы.
Современные интерфейсы непродуманные
Иногда пользователю непонятно, как выполнить свою задачу и что от него хотят.
Например, поиск Google. Введем "Видео-обзор Photoshop CS6". Как видим, в начальном меню нет кнопки "Видео". Она скрыта. Я не думаю, что пользователи ПК чаще ищут "Карты", чем видеоролики.
Пример №2. В старом дизайне ссылка на расширенный поиск находилась возле поля поиска. Теперь оно спрятано в меню, которое находится далеко возле правой границы окна, а в мобильной версии внизу страницы (а при клике на меню вам предлагают выбрать производителя телефона и скачать программы).
Связанные элементы лучше располагать рядом. Я бы перенес кнопку настроек ближе или сделал как раньше.
Пример №3. Для примера хотел найти изображение Excel 2013 с русским интерфейсом. В поиске картинок от Google в быстрых настройках нет выбора языка среди результатов поиска. Я должен перейти в расширенный поиск. Это лишние действия. Первая мысль: "Забей!".
Идем в расширенный поиск. Там есть выбор страны, но нет выбора языка. И что делать, если я захочу найти фото русскоязычных (в Интернете) эмигрантов в Канаде? Миссия невыполнима.
Пример №4. Со страницы регистрации на Gmail нельзя перейти ни на один другой сервис от Google. Даже логотип Google не является ссылкой. Пользователь попадает в тупик.
Современные интерфейсы непонятные
Посмотрите сколько здесь выделений в интерфейсе:
Непонятно, где мы находимся, потому что меню "File" более контрастно выделено, но сейчас активная вкладка "Review". А выше всех находится "Picture Tools" и она выделена третьим способом. Кто важнее и кто сейчас активен? Если следовать принципу вложенности, то все вложено в "Picture Tools" и он главный.
Также активная кнопка (а может это не кнопка, а индикатор) "Track Changes". Но зачем так сильно выделять этот индикатор? Можно было в выключенном состоянии сделать иконку блеклой, а во включенном состоянии - контрастной.
Так же сейчас активен инструмент, который настраивает обтекание картинки текстом. Называется "Layout options". Так почему бы его не назвать "Image option". Ведь он настраивает поведение изображения. Не все пользователи понимают, что такое слой. Я не знаю, что такое слой в Word.
Я думаю, что это тупиковый интерфейс и дальше нужно делать полное изменение, следуя правилам подчиненности и вложенности.
Современные интерфейсы неясны
Часто трудно понять, где кнопка, поле ввода или просто картинка. Поля ввода в виде полосок в Android 4:
Для нового пользователя, привыкшего к нормальному полю в Windows, Linux или MacOS, такое обозначение будет очень непривычным.
Самое страшное, что это идет в массы. Например, это скопировали в Приват24, которым будут пользоваться люди всех возрастов:
Некоторые не поймут назначение этого элемента.
Элементы должны ясно показывать, как с ними взаимодействовать.
Современные интерфейсы не помогают вашему обучению
Система должна иметь встроенную контекстную помощь. Пользователь должен легко и быстро понимать назначение элемента интерфейса.
Вместо этого Adobe Photoshop отправит вас на сайт Adobe читать руководство пользователя и изучать интерфейс сайта, а Windows запустит справочную программу, к которой бы тоже неплохо бы приложить справочные материалы.
Современные интерфейсы требуют от вас слишком много данных
КПД некоторых интерфейсов ничтожно мало. Рассчитывается КПД из соотношения информации, необходимой для выполнения задачи, ко всей требуемой информации.
Рассмотрим процесс создания почтового ящика на Gmail. Необходимой информацией для создания электронного ящика являются 2 поля: ваш логин и поле для пароля (возможно, запасной ящик).
Но от вас требуют заполнить 13 полей + 3 чекбокса. 2/13=15,4%. С чекбоксами - 2/16=12,5%.
Защита от спама CAPTCHA: угадай букву
Это просто насилие над пользователем. Легче заполнить несколько полей, чем это одно.
В школе мне лень было носить некоторые книги, и я читал книгу у соседа сзади "вверх ногами". Но некоторые CAPTCHA я осиливаю раза с 9-ого, если повезет. Иногда при неудаче требуется ввести все поля заново - epic fail.
Уже давно пора заменить это чем-то другим. Например, легкими логическими или арифметическими операциями с предметами, где ответом будет клик по одной из картинок ("3 апельсина + 3 мандарина =?" или "двигающиеся рычажные весы со слоном и птицей").
Может кто-то скажет: "Это же скажется на трафике!" Это проще, чем слушать аудио-версию CAPTCHA.
Я редко авторизируюсь на Хабре. Я не мазохист, чтобы каждый раз при входе вводить CAPTCHA.
Современные интерфейсы указывают, что вам делать
Разработчики настолько обнаглели, что их программы стали диктовать свои условия пользователям! Программы должны служить пользователю, а не командовать им.
Снова регистрация на Gmail. Родственнику нужна была почта. Ввел простой пароль: qwerty12345. Выдало сообщение, что пароль слишком слабый. Дальше сайт меня не пускает. Ввожу q1w2e3r4t5y6. Не пускает. А когда я смог все-таки протолкнуть этот пароль, то меня заставили заново заполнять некоторые поля и CAPTCHA.
Если вы выдали предупреждение и пользователь не хочет изменять пароль на другой (это не вызовет критической ошибки), то пусть он завершит действие. Не мучайте его. Вы его предупредили.
Современные интерфейсы надоедливые
На страницах корпорации "добра", спама и рекламы регулярно отображается надоедливые надписи "Сделать … вашей стартовой страницей?", "Установите наш чудо-браузер".
Если вам 49 раз сказали "Нет", то на 50-ый раз "Да" не скажут. Особенно это выглядит глупо, если вспомнить, что чудо-браузер давно установлен на моем ПК и сейчас запущен одновременно с Opera.
Второй пример - это сервис Origin от EA Games. Каждый раз при запуске Origin открывает дополнительное окно с рекламой своих продуктов, которое приходится закрывать не читая. Если вам так нравится агрессивный маркетинг, то хотя бы отберите рекламу, исходя из истории покупок клиента. Вместо этого мне предлагают Simcity с Барби, когда у меня куплен Battlefield 3.
Современные интерфейсы редко заботятся о ваших данных
Данные пользователя превыше всего. Программа всегда должна предупреждать об деструктивных действиях и стараться оберегать данные. Лучше перестраховаться.
Если вы хотите удалить картинку в галереи QuickPic на Android, то нажимаете на иконку с корзиной. Появляется что-то с надписью "Удалить". Нажимаете, и файла нет. Никаких предупреждений и вопросов. В первый раз я случайно так потерял несколько фотографий, делая все автоматически.
Пример №2. Даже версия Photoshop CS6 может словить баг и "вылететь". Иногда это означает, что ваш файл PSD больше не откроется. Выход - при открытии программа создает копию файла и работает с ней.
Современные интерфейсы не учитывают особенности психики людей
У человека 1 локус внимания и в критических ситуациях пользователь особенно на нем концентрируется и игнорирует все остальное.
Например, Tomb Raider 2013:
Когда я случайно замечал второе сообщение, то Лара уже летела в пропасть.
Можно было просто написать: "Нажмите схватиться [Е], чтобы не упасть".
Разработчики современные интерфейсов хотят выделиться
Если ваша программа работает в среде пользователя, то лучше всего, чтобы она копировала работающие принципы взаимодействия из родной среды пользователя:
Но все хотят быть уникальными:
А некоторые сильно этого хотят:
Современные интерфейсы заставляют вас изучать тысячи новых сочетаний клавиш, принципов работы и новых интерфейсов.
Унификация - это удобно и для пользователя, и для разработчика.
Если вы делаете серию продуктов, то постарайтесь, чтобы сочетания клавиш, интерфейсы и основные принципы были максимально одинаковые.
Про это ничего не знают в Adobe.
Диалоговое окно выбора цвета в продуктах серии Adobe CS6:
Здесь нет идентичных элементов.
Пример №2. Для отмены последнего действия в Photoshop нужно нажать Ctrl+Z. Повторное нажатие Ctrl+Z повторит отмененное действие. В Illustrator повторное нажатие Ctrl+Z будет дальше отменять все предыдущие действия. Для подобного эффекта в Photoshop нужно нажимать Ctrl+Alt+Z. Даже палитры инструментов в этих продуктах открываются по-разному.
Современные интерфейсы часто бесполезно изменяются
Это заставляет пользователя испытывать шок и заново переучиваться. Никто не купит новую версию программы с новым интерфейсов, если затраты на обучение будут превышать полученную пользу от обучения.
Давайте рассмотрим краткую историю Word.
Word 2003 - неудобно. Нет четкой структуры.
Word 2007 - очень удобно. Четкая структура. Новичок сразу поймет, где кнопка.
Word 2010 - красивее, но менее наглядно.
Word 2013 - OMG. Надеюсь, что мне не придется в нем работать!
Примечание. Набор заглавными буквами можно применять там, где не важны визуальное отличие надписи или вы хотите, чтобы пользователь внимательно прочитал заголовок. Такие заголовки трудно читать из-за одинаковой формы букв и невозможности быстро их просмотреть. Обычно мы не читаем слова до конца, а различаем их по форме:
Современные интерфейсы перегружены информацией
Некоторые интерфейсы просто завалены кнопками и надписями. Это создает только визуальный шум. Находите похожее, группируйте, скрывайте неважное.
Хороший пример - панель инструментов Photoshop.
Плохой пример - Word 2013. Один пользователь решил проблему. Он вынес все нужные элементы в заголовок окна:
Наверное, это тоже очень неудобно.
Современные интерфейсы перегружены пиктограммами
В целях экономии 1 заказчик требовал разработать дизайн магазина, где абсолютно все должно быть представлено пиктограммами. Хотел сэкономить на разработке многоязычного интерфейса.
Вряд ли это хорошая идея:
- Вы не сможете подобрать понятные пиктограммы для всех действий;
- Скорее всего, вам придется написать к каждой иконке всплывающую подсказку;
- Не все жесты имеют одинаковое значение во всем мире:
В Иране и Уругвае этот жест означает угрозу изнасилования.
Но если у вас ограниченное пространство и много операций, то иконки - это ваш выбор.
Некоторые современные интерфейсы позволяют слишком сильно себя изменять
Иногда стандартизация это хорошо. К тому же, как вы напишите руководство к продукту, если не знаете, как он будет выглядеть. Тестирование интерфейса тоже будет не очень полезным. Пользователи не являются специалистами в интерфейсах в отличие от вас.
Современные программы изменяют ваш привычный интерфейс
Если Google засыпает вас спамом из рекламы, то, например, Yandex лезет вам на компьютер и изменяет ваш интерфейс. Это как ВИЧ Интернета. Не заметили галочку при установке бесплатной программы? Теперь восстанавливайте настройки всех браузеров и удаляйте дополнения. Это очень раздражает пользователей.
Не знаю, как его убрать отсюда:
Если вам нужно изменить интерфейс пользователя, то уходя, приберите за собой.
Windows 8
Только ленивый не критиковал Microsoft. Не могу особо ничего плохого сказать про интерфейс Windows 8. Я просто не ставил ее и не буду ставить. Вот причины:
- Убрали прозрачность. Теперь я не вижу, что находится за активным окном;
- Некрасивый плоский интерфейс. ИМХО;
- Когда я увидел замену стандартному "Пуск", то подумал:
Наверное, для меня был бы идеальным гибрид из меню XP, 7 и 8.
Заключение
Google и Microsoft как ледоколы пробивают пусть в неизведанное пространство, но не всегда в правильном направлении. Другие идут по уже "протоптанной тропинке", копируя модные тренды.
К чему ведут эти проблемы в проектировании интерфейсов? Это может завести разработчиков в тупик, а пользователям доставит огромную головную боль. Первым, возможно, придется проектировать новые интерфейсы и возрождать из пепла свою клиентскую базу, а вторым придется или терпеть и злиться, или изучать новые программные продукты.