Советы программисту-дизайнеру интерфейсов

    Нет сложным интерфейсам

    Проблема


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

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

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



    Простота


    Задачи пользователя. Любой интерфейс – это зло. Пользователь использует продукт не ради продукта, а ради того, чтобы решить какую-то свою задачу. Например, мы используем интерфейс набора телефонного номера не для того, чтобы набрать номер, а для того, чтобы поговорить с другим человеком. Сам факт набора является необходимой операцией, которую навязывает технология.
    Таким образом, создавая каждую форму, диалог или панель я постоянно задаю себе вопрос: «какую задачу пользователя я сейчас решаю?». Если выходит, что я пытаюсь решить несколько задач одной формой (или панелью), то скорее всего что-то не так. В таких случаях надо подумать, что является основной функцией, а что – фичей «не для всех».

    Правило 20/80. Как известно, 20% усилий дают 80% результата. Зачастую для задач 80% пользователей достаточно 20% форм/диалогов/панелей. Стало быть, при создании интерфейса надо быть очень аккуратным, когда выбираешь те двадцать ключевых процентов.
    Перед тем как добавлять ещё одну кнопку, чекбокс, поле, ссылку, я пытаюсь ответить на вопрос: «будут ли этой функцией пользоваться 80% пользователей?». Если нет, то на помощь приходит техника progressive disclosure.
    Например, вот панель настроек из Firefox:
    Чем глубже тем сложнее

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

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

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

    Лишние вопросы. Часто интерфейс спрашивает пользователя о чём-либо. Обычно это поп-ап с кнопками «ОК» и «Отмена». Порой вопрос вполне уместен. Однако, в большинстве случаев вопрос только мешает. Войну поп-апам объявили давно. Тем не менее, я бы хотел привести наиболее популярные типы лишних вопросов:
    1. Вопрос, который может понять лишь 20% пользователей.
      Например:
      даже не знаю, что вам ответить
      Те, кто знаком с тем, что такое keychain, поймут вопрос и ответят на него верно. Однако, большинство пользователей, скорее всего, пожмёт плечами и нажмёт «Allow».
    2. Вопрос, не имеющий отношения к текущей задаче. Это случается очень часто: вы работаете с какой-то программой, и тут возникает поп-ап:
      Уйди уже!
      Это заставляет забыть о текущей задаче и срочно принимать совершенно неожиданное решение.
    3. Вопрос, на который система вполне может ответить сама. Например, при удалении файла из какой-то временной папки необходимо ответить на вопрос:
      Да, хочу!
      Система знает, что этот файл временный и не очень-то и нужен. Более того, пользователь всегда может его восстановить.

    Undo. Люди ошибаются. Приложение должно быть готово к этому. В идеале, должна быть возможность отменить любое действие пользователя. Каждый раз, когда пользователь принимает решение (например, выбирает юзернейм, удаляет файл или меняет конфигурацию), он может ошибиться. Очень грустно, если система не позволит исправить эту ошибку.
    Тут же хочется отметить, что нельзя полагаться на вопросы, вроде «Вы уверены, что...?» или предупреждения, «Внимание! Это действие приведёт к ...!». Во-первых, не все их читают, а, во-вторых, из тех, кто читает, далеко не все действительно понимают, что именно имеет в виду система.

    Единообразие


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

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

    Поведение. В разных ситуациях одинаковые компоненты должны вести себя похоже. Например, кнопка «назад» всегда должна возвращать на предыдущую страницу. Или, если зелёная кнопка всегда открывает дополнительное диалоговое окно, то она дожна открывать его действительно во всех контекстах.

    Расположение компонентов. Интерфейс выглядит очень неаккуратно, если компоненты разбросаны невпопад. Если нарисовать несколько линий и располагать компоненты по ним, то интерфейс будет выглядеть намного аккуратнее. Например:
    В клетку
    Видно, как компоненты сочетаются друг с другом по горизонтальным и вертикальным линиям.

    Оформление текста. Обращайте внимание на лейблы! Стоит выработать и придерживаться правил, где и что пишется с большой буквы, где ставится многоточие (...), где ставятся точки. Очень важно одинаково именовать объекты системы: если где-то есть меню «параметры», то в другом месте это же меню никак не может называться «опции».

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

    Общение


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

    Продукт менеджмент. Мне кажется, что продукт менеджер должен быть верным другом программиста. Техническое задание (aka PRD) – это один из основных документов, помогающих понять «чо надо-то». Именно с продукт менеджером можно обсудить спорные моменты, попросить собрать необходимые данные, указать на возможные сложности, связанные с реализацией. Очень здорово, если техническое задание содержит наброски интерфейсов. Это в разы облегчает понимание того, что требуется создать.

    Группа поддержки. Мне кажется, группа поддержки (aka support) ближе всего к самим пользователям системы. Именно к ним обращаются пользователи когда что-то не понятно, что-то работает не так, как ожидает пользователь, именно они объясняют, как надо использовать систему. Очень часто они подают идеи новых функций, которые могут в разы облегчить работу с продуктом.
    Чтение саппорт тикетов, да и просто беседа с кем-либо очень открывает глаза на реальное положение дел.

    Группа продаж. Я нашел очень полезным задавать коллегам из группы продаж (aka sales) вопросы о том, что можно изменить в интерфейсе, чтобы продукт было проще продать. Ответы могут быть очень интересными. Может, укажут на продукты конкурентов, может, попросят сделать «повебдванольее». Иногда можно услышать много интересного.

    Заключение


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

    А какие советы программисту-дизайнеру дали бы вы?
    Поделиться публикацией

    Комментарии 147

      +2
      Спасибо статья понравилась.

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

      После того, как сделайте прототип и настроите все для себя, дайте другому человеку протестировать. Всегда найдутся замечания.
        +19
        Я бы настоятельно рекомендовал для GUI-приложений использовать только нативные компоненты, а не рисовать свои кнопочки/чекбоксы/слайдеры. Да и на сайтах элементы управления форм лучше не перекрашивать, если нет уверенности в том, что получится в итоге удобно и красиво.

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

          Не далее как месяц назад пришлось рефакторить UI, который писал какой-то фанат компании Apple. Он специально сделал так, что все элементы управления выглядят как в OS X. Хотя 90% пользователей этого приложения сидят в винде. Более того, он маковские кнопочки рисовал сам (вместо того, чтобы юзать общую библиотеку). Было страшно.
            +25
            apple_fan:
            «какой-то фанат компании Apple»

            Хм…
              +2
              Это был не я. Это был г-н Шахид, из нашей группе в Пакистане. Очень страшный человек.
                +3
                ФСБ напрягло булки от Вашего коммента
                  0
                  Да уж, говорящее имя :)
              +31
              Насчет нативных компонентов — золотые слова. А то выходит нечто типа
                0
                Светодиодный фонарик из электрички по 10-руб пачка умиляет
                  +5
                  Зато юзверям нравится…
                    +1
                    Я и сам негодую, но это факт.
                    –2
                    Это точно. Всегда раздражжали программы, которые хотели выпендриться. В них нифига быстро не найдёшь, зато якобы «красиво». То же самое происходит с M$ Office с их слайдерами. Типа «красиво», но чего не коснись, задолбаешься искать.
                      +4
                      На счет офиса мне так же казалось поначалу. Спустя некоторое время вник что к чему и теперь эти слайдеры и разделение элементов по ним кажутся мне очень логичными и упрощают работу по сравнению с панелями и меню от предыдущих версий.
                      Хочу сказать лишь, что конкретный пример МС Офиса кажется мне удачным, даже при том, что требует некоторого времени на вникание.
                        +1
                        Можно сказать, что я, впринципе, не ценитель интерфейсов. После первых пробных документов в LaTeX понял, что мне достаточно простого текстового редактора с подсветкой синтаксиса. Конечно это касается стандартизованных документов: письма, служебные записки, контрольные работы, курсовые и дипломные проекты и т.д.
                        А когда нужно сделать что-то типа аля объявление на дверь или набрать лекцию с кучей картинок (очень удобно рисовать в тетради, а потом просто фотографировать на встроенную в ноутбук камеру), то тут достаточно OpenOffice.org.
                          0
                          Готов сказать тоже самое про касперского. Сначала ужаснулся интерфейсу, потом привык и теперь он мне кажется достаточно дружелюбным. Если добавить, что почти все антивирусы используют уникальный дизайн интерфейса, то Касперский выделяется скорее в лучшую сторону.
                        +12
                        а иногда и вот так выходит…

                          0
                          Вы еще таки не видели версию 2010…
                            –1
                            пардон, 2011 :)
                              +1
                              предоставьте скрин
                            –4
                            Я полагаю это ОТВРАТИТЕЛЬНО, ВОЗМУТИТЕЛЬНО, ЭТО ПОЗОР ПРОГРАММНОЙ ИНДУСТРИИ.
                            • НЛО прилетело и опубликовало эту надпись здесь
                                +1
                                А шрифт-то какой ужасный!
                                0
                                Да, а еще этим грешат разработчики комплектного софта для сканеров.
                                +3
                                Еще стоит добавить что при изменение стандартной темы в новой версии ОС, свои «улучшеные» элементы управления часто остаются в старом стиле.
                                  0
                                  Золотые слова. Но…
                                  Недавно делал интерфейс под социально-финансовый проект (я не программист, делали толково). Большинство пользователей этого продукта либо пожилые дамы, либо абсолютно неграмотная к компам молодёжь, либо яркие любители «1С-like GUI»…

                                  Как быть, если даже нативная-пренативная кнопка пугает юзера?
                                  Местами прибегнул к увеличению тайтлов кнопок… (как в Алисе с пирожком «съеш меня»)…
                                  Местами даже на функциональные кнопки добавил альтернативные иконки…
                                  И даже ввели некое цветовое разграничение… Желтоватые оттенки — у полей и контролов необходимых к заполнению (исполнению). Зеленоватые — «реккомендованные» для пользования. Красноватые — те что связанны с удалениями, ошибками и пр.
                                    0
                                    Думаю, что если процессом создания кастомных компонентов руководят профессиональные дизайнеры, то всё в порядке. Однако, мне, программисту, было бы очень сложно создать компонент, не наделав всяких ошибок.
                                      0
                                      Вот для «технических» интерфейсов (которыми пользователи пользуются 90% своего рабочего времени) цветовое кодирование и различие в разных по функциональности элементах оформления — обязательная фишка. Бывает странно видеть, как «оптимизаторы» приходят и начинают резко делать всё «стильно и красиво», при чём юзабельность убивается напрочь. В частности, этим грешат переделыватели до-web2.0 сайтов, которые до переделки были хоть и серыми/убого выглядящими, но реально юзабельными под всеми браузерами.

                                      В качестве примера можно ещё посмотреть моддинг клавиатур у кассирш в метро.
                                      0
                                      Но не всегда и не везде можно использовать нативные компоненты т.к. не везде они есть. Я вот тут пишу приложенице, где надо сделать вкладки по браузерному типу (с кнопкой Х ). Пишу на Python PyGTK. Вот этот Х надо вообще вручную дорисовывать в коде.
                                        0
                                        У меня была та же проблема с Java Swing. Пришлось самому нарисовать компонент, который один-в-один вкладки виндовово фаерфокса.
                                        Может, нестандартные компоненты стандартных приложений можно считать стандартными?
                                          0
                                          «Может, нестандартные компоненты стандартных приложений можно считать стандартными?»

                                          Именно так — вкладки с кнопочкой закрыть — это именно стандартный (интуитивно понятный и привычный пользователю) контрол. Несмотря на то, что его нет во многих (в большинстве) стандартных библиотеках разных технологий.
                                      +10
                                      Отсюда мысль: нет ничего проще интерфейса командной строки. Вот та фигня с двумя кнопками в начале отлично заменяется на wget site.ru. И 40 страниц мануала по мелким опциям, если вам захотелось экзотики.
                                        +7
                                        У командной строки есть минус: для того, чтобы эффективно её использовать надо запомнить довольно много команд.

                                        Думаю, что интерфейс коммандной строки подходит в случаях, когда пользователи могут потратить довольно много времени на тренировку.
                                          –1
                                          А в интерфейсе вы запомните достаточно много иконок, расположения кнопочек и прочего :)
                                            +5
                                            На тему консоли и GUI можно много спорить.

                                            Человек мыслит ассоциативно — поэтому кнопочки запоминаются проще. Фактически каждый элемент интерфейса — ассоциируется с тем, что он делает. И кнопочки поэтому запоминаются быстрее.

                                            Консоль — более функциональный интерфейс, но как выше сказано — научится им пользоваться сложнее. Приведу пример когда консоль намного удобнее:
                                            Ставил себе Ubuntu 10.04. Имею Ethernet соединение с динамическим IP. Попытался настроить соединение через GUI, не получалось и все. Зашел в pppoeconf и в 3 секунды настроил.
                                              0
                                              Просто разработчикам не надо было мудрить в GUI, а сделать консольный принт.
                                              +1
                                              Я бы добавил еще что в раздутых интерфейсах возникает проблема, что «эта кнопочка была где-то здесь, на одной из этих закладок этого диалога». То есть вроде как помнишь что надо, но не помнишь где. В консоли же все доступно с «первого уровня иерархии».
                                                +9
                                                Кстати, в OS X решили эту проблему довольно изящно:
                                                  0
                                                  Вот это и правда здорово, с ужасом вспоминаю попытки найти что-то потерянное в дебрях интерфейса мс офиса. И хотя начиная с 2007 с этим чуть лучше, но если какой-то кнопки не окажется на стандартной ленте, искать ее можно очень долго.
                                                    +2
                                                    Идея неплохая (похожее решение есть, например в The Bat!). Однако за пункты меню «Make ...r Case» и «Make ...r Case» фирме Apple (ну или тестировщику интерфейса как минимум) полагается большой жирный минус.
                                                      +1
                                                      Они слова Upper и Lower сократили до ...r? :) Это на самом деле так и есть? Это ж с ума сойти, визуально то одно и тоже!
                                                        0
                                                        <шутка>Да ладно, куча народу обходится label-ами вида «Button1» ;)</шутка>
                                                          0
                                                          В русском все нормально.
                                                            0
                                                            Оно так сокращается только при поиске (видимо, каскадное меню не влезает с учетом раскрытого меню Help), но все равно забавно.
                                                            0
                                                            И мы такое в Альфу слизнули :)
                                                              0
                                                              Правда, радикально менее анимированное.
                                                          0
                                                          Кнопки и т. п. как раз необязательно запоминать, достаточно помнить, что какая-то возможность есть в принципе, а потом провести мышкой над всеми кнопками (и почитать тултипы, в случае «форм» почитать лабелы элементов управления и те же тултипы). Намного проще, чем читать --help (или -h или -?), а потом набирать ключи (рискуя опечататься), постоянно скролля портянку с их описанием. Плюс GUI намного чаще локализован, чем CLI, то есть читаешь подсказки на родном языке «автоматически» выхватывая взглядом то, что нужно, а не читая всё подряд, переводя в уме и прикидывая оно или не оно.

                                                          CLI, имхо, хорош или для часто используемых действий, когда команд (и их ключей) используешь минимум (типа ls или ls -la), держа их в «оперативке», или же при создании скриптов/сниппетов, которые будешь использовать постоянно, то есть час-другой сейчас на копание в манах сэкономит десятки и сотни часов позже.

                                                          GUI (хороший) же удобен, когда надо разово что-то сделать и забыть, либо когда сложно держать в голове всю информацию о, например, проекте — набирать, даже с умными автодополнениями, пути в пяток-десяток каталогов достаточно долго (особенно если наизусть их не помнишь и постоянно жмёшь «таб», чтобы ознакомиться со списком «альтернатив»), а развернуть нужные каталоги в IDE куда быстрее, поскольку охватываешь взглядом всё дерево (или одну его ветвь) в целом
                                                          0
                                                          > help
                                                            +1
                                                            и? список из полусотни команд (среди которых даже нет ls) и даже нет их описания. Для каждой из них писать help чтобы хотя бы посмотреть, что она делает?
                                                            +5
                                                            По-моему, одна из главных проблем программистов состоит в том, что они считают всех, кто не может понять логики работы интерфейса их мега-программы тупыми юзверями. Себя же они поголовно считают гениями. Типа — раз пользователю непонятно что-то в моей программе — значит он тупой, пусть учит матчасть. Не находите? Мне лично не раз приходилось встречать таких программеров :))
                                                              +1
                                                              Да! Да! Да! Таже если это не происходит сознательно, когда две недели писал какой-то кусок кода, его поведение, корнер-кейсы становятся очивидными. И по инерции предполагаешь, что это поведение также очевидно для пользователя. Ну и спрашиваешь: «Файл был изменён локально, однако версия на сервере была откачена администратором. Синхонизировть файловую систему?»

                                                              Эту болезнь надо знать и лечить.
                                                                +2
                                                                Вечный парадокс интерфейсодизайнера. Сделать интерфейс действительно удобным, но требующим тренировки, либо пожертвовать частью юзабельности ради discoverability? Возможно совместить можно в очень редких случаях, но я ни одного не видел. Всегда были LaTeX vs XXXOffice, emacs vs Eclipse и т.д. У одного удобный и настраиваемый интерфейс, у другого — кнопочки на виду и со справкой, но интерфейс более неуклюж.
                                                                +1
                                                                А положение галочек (особенно, в глубине диалогов) запоминать не надо? В случае с опциями есть man и контекстный поиск. А у галочек?
                                                                  0
                                                                  Вон выше приведён скрин из МакОСа — таки там есть контекстный поиск по галочкам.
                                                                    0
                                                                    По всем? У всех программ?
                                                                      0
                                                                      во всей вселенной.

                                                                      до макоси кстати это например в миранде было, что я лично склонен считать провалом интерфейса как раз, если в нём без поиска ничего найти нельзя, но удобно, удобно ;)
                                                              +12
                                                              Ну, не все знают о том, кто пишет лучшие гайдлайны по разработке интерфейсов.

                                                              Мои любимые — это гайдлайны Microsoft. Ребята наслушались злобных отзывов о Висте, и уже к релизу Семёрки сделали действительно хороший гайдлайн по анимации и переходах в приложениях.

                                                              Прошу

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

                                                              Кстати, их же гайдлайн по созданию иконок очень хорошо объясняет, как делать Семёркоподобные иконки.

                                                              Хотя, и не все из этих документов приведены в настоящее время. И библией их счесть ну никак нельзя.
                                                                +10
                                                                Вообще, читать гайдлайны — это очень правильно. Иногда открывает глаза.

                                                                До кучи, приведу ссылки на
                                                                    0
                                                                    Кстати, да, Эппл тоже молодцы. На самом деле, они с МС по поводу гайдлайнов — впереди планеты всей. Жаль только, очень мало дизайнеров эти гайдлайны прочитали.
                                                                      0
                                                                      Ну почему? В макоси большинство программ как раз активно ими пользуются. Лично я уже давно не встречал программы, в которой бы некрасивый интерфейс бросался в глаза.
                                                                      На Windows с этим похуже. Очень много программистов все еще любят проявлять свой «дЕзайнерский» талант.
                                                                  +2
                                                                  Пользуясь случаем хочу спросить. Может кто в курсе, почему в браузерах Opera, Chrome, Firefox, Safari, переключение вкладок сделано по MouseDown, не дожидаясь пока я отпущу кнопку мыши? Чем это обосновано?
                                                                    +4
                                                                    Может, чтоб было проще перетаскивать вкладки? Типа — MouseDown = выделили, MouseMove = тащим, MouseUp = притащили. Впрочем, это только догадка.
                                                                      +1
                                                                      С этим как-раз то и проблемы. Например у меня открыто несколько вкладок, сейчас я смотрю хабр, и хочу просто перетащить соседнюю фоновую вкладку. Вместо перетаскивания она у меня сразу открывается. Попробуйте например в опере открыть панель экспресс-панель и перетащить на неё фоновую вкладку (левой кнопкой мыши).
                                                                        0
                                                                        хм… проверил в firefox — ваш кейз отрабатывает нормально — нажал на фонову, перетащил, отпустил — она *не* открылась.
                                                                          0
                                                                          У меня Firefox 3.6 на Windows XP SP3. При нажатии вкладка открывается, т.е. перетащить фоновую вкладку без её открытитя не получится.
                                                                            0
                                                                            3.6.3 + куча плагинов + windows 7
                                                                            фоновое перетаскивание работает.
                                                                              0
                                                                              Значит или плагины или Windows 7. Скорее второе, и как написал ниже atd, вероятно это нативное поведение табов в системе.
                                                                                0
                                                                                3.6.3 + несколько плагинов + Win7
                                                                                Фоновое перетаскивание не работает.
                                                                                  +2
                                                                                  3.6.3 (интерфейсных плагинов типа TMP нет) + Ubuntu 10.04 — то же самое, при нажатии вкладка сразу активируется, только потом можно таскать её
                                                                                    0
                                                                                    В Fx вам поможет
                                                                                    extensions.tabmix.mouseDownSelect: false;
                                                                          0
                                                                          в ИЕ тоже. И в нативном таб-контроле в винде кстати тоже, скорее всего от него и пошло.
                                                                            0
                                                                            Мне лично кажется, что по-другому будет просто жесть как неудобно. Пользователь будет подсознательно теряться в догадках, что там у него, где и почему выделено.
                                                                              +1
                                                                              В Опере до последнего (Opera 10.5) было по щелчку… Изменили, т.к. во всех остальных браузерах иначе, и, будто, пользователю кажется, что интерфейс «отзывчевее».
                                                                              Раньше, например, я мог вкладки пересортировать, не переключаясь на каждую. Но, видимо, мои потребности относятся к меньшинству.
                                                                                +1
                                                                                Могу только догадываться, что психологический эффект отзывчивости перевешивает надобность сортировки.
                                                                                Честно говоря, даже не задумывался и не чувствовал неудобств до вашего комментария)
                                                                                  0
                                                                                  Я бы не сказал, что здесь неудобства. Но например в случае с ComboBox, открытие по MouseDown оправдано тем, что при нажатии выпадает список и двигая мышью вы выделяете строку а при отпускании кнопки — сразу активируете её.
                                                                                +7
                                                                                Я бы дал совет — не забудьте про таб-ордер, возможность copy-paste'a, валидацию/ограничение значений полей, дефолтные действия/кнопки.
                                                                                  0
                                                                                  отличная статья, спасибо.
                                                                                    +1
                                                                                    А я бы посоветовал взять, потратить пару дней что бы поделать то, чем занимаются пользователи. Зачастую минусы становяться видны почти сразу — например здесь можно сделать конструктор, а тут не спрашивать подтверждение.
                                                                                      +2
                                                                                      Это очень дельный совет. Однажды мне пришлось около недели пользоваться своим UI. После этого, я накупил книг, записался на курсы и стал учиться эти UI делать…
                                                                                        +1
                                                                                        не всегда помогает пользоваться самому приложением, некоторые вещи тебе удобнее делать так, как неудобно некоторым (а может быть и большинству) пользователям в силу каких-либо привычек и склонностей.
                                                                                        именно такие места помогает раскрыть тестирование продукта и мозговой штурм, в котором бы участвовало хотя бы несколько человек с разными складами ума
                                                                                          0
                                                                                          не всегда помогает пользоваться самому приложением, некоторые вещи тебе удобнее делать так, как неудобно некоторым (а может быть и большинству) пользователям в силу каких-либо привычек и склонностей.
                                                                                          именно такие места помогает раскрыть тестирование продукта и мозговой штурм, в котором бы участвовало хотя бы несколько человек с разными складами ума
                                                                                            0
                                                                                            эх, инет отжигает(
                                                                                            +1
                                                                                            Действительно, очень полезный метод! Я сам активно пользовался 90% написанных мною программ, и это очень помогало выявить некоторые слабые стороны. А те вещи, которые можно показывать нормальным людям, старался сразу показать и, если не мог объяснить за 5мин, как этим пользоваться, начинал думать над ошибками.
                                                                                          +17
                                                                                          Кто-то должен был запостить эту картинку…
                                                                                            +7
                                                                                            Если программист сделает интерфейс как у Гугла или Эпла, откуда пользователи узнают что это очень сложная программа с богатыми возможностями? Никто не станет платить за программу состоящую из одной строки ввода и одной кнопки!
                                                                                              +7
                                                                                              Напомнило историю из жизни: работал над какой-то фичей, сильно её оптимизировал, стало очень быстро работать. Один из коллег как бы в шутку заметил, что неплохо бы добавить задержки, а то пользователи подумают, что это очень простая фича и много платить за неё не стоит.
                                                                                                +1
                                                                                                Напомнило цитату с баша: Писал долго программу конвертирующую инфу из старого формата в новый, запустил — всё сработало меньше, чем за секунду. Нет, начальник будет недоволен. Я написал лог, построчно выводящий обробатываемые данные и рандомное время задержки. Теперь — солидно и долго, есть что показать начальству!
                                                                                                +8
                                                                                                угу, а вот за это платят именно поэтому столько денег
                                                                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                    –8
                                                                                                    К сожалению, множество программ так и разрабатываются: есть менеджер, который ну прямо таки наверняка знает, что нужно пользователю и говорит НАДО! Вспоминается еще одна картинка:

                                                                                                    Здесь тоже решили, что все это надо.
                                                                                                    • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                        0
                                                                                                        В общем Вы правы: талантливый дизайнер может создать эффективный и красивый богатый интерфейс. Стоит лишь отметить, что если интерфейсом занимается не дизайнер, гораздо проще потеряться в рюшечках. С простым интерфейсом сложнее ошибиться.
                                                                                                        • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                          0
                                                                                                          Тогда встает вопрос — как мерять эту меру, извините за тавтологию. Как понять, что вот сейчас уже хватит? Вообще, это достаточно интересный вопрос. Любопытно, как решают его создатели различных минималистичных сервисов типа твиттера или bit.ly. Им же тоже регулярно должна приходить мысль — а вот не сделать ли вот еще такую рюшечку.
                                                                                                          • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                              0
                                                                                                              Мне нравятся программы, которые предлагают, как минимум, два «скина» — дефолтный для ОС (по гайдлайнам) и «супер-пупер». Если «супер-пупер» действительно удобен, то им и так будут пользоваться, нов сегда, имхо, должна быть возможность переключиться на стандартный. Жаль, только что даже крупные производители этим пренебрегают- самый, наверное, популярный пример во всех осях — Google Chrome (Chromium) — может и хороший браузер, но понять я этого не успеваю, не хватает обычного гномовского интерфейса, включаю опять файерфокс
                                                                                                      0
                                                                                                      это, конечно, показательно — закинуть скрин программы 97го года выпуска, и тыкать в него пальцем. сегодняшний интерфейс 1С выглядит так:

                                                                                                      и на мой вкус — он прекрасен!
                                                                                                        +2
                                                                                                        К сожалению картинку не видно. Или это действительно незаметный интерфейс)
                                                                                                          0
                                                                                                          про картинки опять наврали?
                                                                                                          imagebin.ca/view/XFX_mbW.html
                                                                                                            0
                                                                                                            это, кстати, вопрос к «интерфейсу» Хабра. написано — [между прочим, можно использовать html-теги]. на деле — нельзя. или льзя, но не всем. или льзя, но не так, как написано
                                                                                                              0
                                                                                                              Льзя, если у вас успешная карма ;)
                                                                                                        +1
                                                                                                        Хороший интерфейс должен быть незаметен вообще.
                                                                                                        0
                                                                                                        Платят не за количество кнопок в программе, а за то, что она дает пользователю. Абстрактно, в идеале для пользователя должна быть одна кнопка — Make me happy. Остальные элементы интерфейса — лишь дополнительные вопросы с целью выяснить что же именно делает пользователя happy. Слишком большое количество уточняющих вопросов (читай — элементов интерфейса) говорит о том, что разработчики плохо понимают what makes user happy.
                                                                                                          +2
                                                                                                          Аккуратно. Есть две группы: sales и пользователи. Очень часто, когда большая компания А покупает у большой компании B какой-то продукт, именно sales (ну и, может, VP) смотрят на продукт (или просто на демы). А потом пользователям ПО спускается сверху. И они матерятся.

                                                                                                          Так что, как я указал в статье, надо говорить и с sales, и с пользователями.
                                                                                                            +2
                                                                                                            Это с точки зрения пользователя. А с точки зрения компании-разработчика в программе должна быть другая кнопка, хотя тоже одна- Give us money. А интерфейсы- это поиск компромисса между этими кнопками.
                                                                                                            0
                                                                                                            Ни Гугл, ни Эпл при этом почему-то не бедствуют :)
                                                                                                            0
                                                                                                            Без золотой середины не обойтись.

                                                                                                            Интерфейс одной кнопки у меня ассоциируется только с дешевыми китайскими велокомпьютерами. Попробуйте настроить такой велокмп, если у него одна кнопка на все случаи жизни. Страх и ужас :)
                                                                                                              –1
                                                                                                              Или даже так:
                                                                                                              +3
                                                                                                              К этой статье я бы порекомендовал книгу Алана Купера «Психбольница в руках у пациентов».
                                                                                                                0
                                                                                                                Именно эта книга сподвигла меня на статью. Помните, он там говорит, что программист не может сделать приличный интерфейс? Мне очень хочется с этим поспорить.
                                                                                                                  0
                                                                                                                  Да он часто повторял эту фразу и Вы не едины в цели опровержения этого. Кстати програмист может многое сделать для улучшеня взаимодействия, но если он этого дествительно хочет!
                                                                                                                    +1
                                                                                                                    «…но если он этого дествительно хочет!»

                                                                                                                    В этом-то и проблема, к сожалению.
                                                                                                                      0
                                                                                                                      Обычно всё же хочет, а не наоборот, но делает удобно для себя, просто в принципе не может отказаться от знаний внутренней структуры приложения и т. п., ему многое очевидно, что не очевидно даже другому программисту, не знакомому с деталями реализации. Возможно хорошая идея — в компаниях ведущих разработку нескольких «конкурирующих» проектов одновременно «бросать» программистов (если нет в штате «юзабилитистов») из «конкурирующих» проектов на проектирование или тестирование интерфейсов (или выдачу «вишлистов» на них) «конкурента». Так сказать, человек со стороны с незамыленным взглядом
                                                                                                                        0
                                                                                                                        Отчасти это я имел ввиду, всё-таки для пользователя это и есть «не хочет». Алан Купер это объясняет наличием двух моделей интерфейса: моделью пользователя (основанной на представлении пользователя о предметной области) и моделью реализации (основанной на знании программиста об устройстве программы).
                                                                                                                    +2
                                                                                                                    Алан Купер сам в общем-то бывший программист
                                                                                                                  +2
                                                                                                                  Я люблю такие топики наличием в них классных, полезных ссылок. Продолжайте, прошу Вас, не останавливайтесь!
                                                                                                                    +2
                                                                                                                    «Программист часто выполняет роль дизайнера пользовательских интерфейсов. Можно поспорить, хорошо ли это.»

                                                                                                                    Ну, тут-то как раз можно и не спорить :) Ответ однозначный — не хорошо.
                                                                                                                      +4
                                                                                                                      «Я верю, что программист может сделать очень приличный интерфейс.»

                                                                                                                      Я не верю. Он его может сделать, но не как программист, а как эргономист или UI-дизайнер. Сочетание этих двух ролей, да чтобы еще и высокого уровня — скорее исключение, чем правило.
                                                                                                                        0
                                                                                                                        Мне очень хочется с Вами (и с Купером) спорить. Приводить аргументы, показывать интерфейсы. Собственно, я задумывал этот пост как начало такого спора. Однако, аргументов в пользу программистов-юзабилисов у меня не хватило. Так что решил помочь тем, кому надо ваять интерфейс по долгу, а не по призванию.
                                                                                                                          0
                                                                                                                          Есть ощущение, что это не последняя статья :) Ждем!
                                                                                                                      +2
                                                                                                                      Есть очень хорошая статья Аза Раскина по теме на A List Apart.
                                                                                                                      О том, что не нужно использовать лишних всплывающих окон и диалогов с вопросами, а надо использовать «Undo». И о том, как это связано с привычками пользователя.
                                                                                                                        +1
                                                                                                                        Отличная статья. Я хотел открыто заявить об этом в посте, но побоялся холивара. Однако, очень приятно, когда вместо «А вы уверены, что...?» можно сделать, что хочешь, а потом откатить.
                                                                                                                          0
                                                                                                                          Думаю, можете смело заявлять. Пометив, что «там, где нужно и возможно». Ведь в вашей статье речь не только о действиях типа удаления, которые подвержены ошибкам. Речь и об интерфейсе в целом, в том числе про «галочки» включения/выключения каких-нибудь опций.

                                                                                                                          Так что информация про важность «Undo» для систем/программ, где высока вероятность потери результатов работы из за привычек, будет хорошим дополнением.
                                                                                                                            +1
                                                                                                                            Начал писать дополнение про поп-апы и понял, что выходит очень неплохой пост. «Бой поп-апам». С примерами неправильного использования и советами, чем их можно заменить. В черновики!
                                                                                                                            Спасибо за идею.
                                                                                                                              +1
                                                                                                                              Cool) Значит, ждем следующую статью. Люблю читать про эргономику на List Apart, поскольку самого интересует эта тема. Чем больше народу будет знать множество простых аспектов построения интерфейсов, тем лучше — тут вы все-таки правы насчет «воспитания» программистов и прочих «непрофильников». Хоть кто-то что-то из этого зацепит, и, того и гляди, у пары пользователей жизнь станет маленько попроще :)
                                                                                                                                0
                                                                                                                                Про поп-апы жду с нетерпением! Я отказываюсь от них, где только можно (и нужно), но хороший совет точно не повредит.
                                                                                                                          +10
                                                                                                                          Добавлю:
                                                                                                                          Значения по умолчанию. Хорошие значения и поведения по умолчанию стоят целого зоопарка целой простыни настроек.
                                                                                                                            –5
                                                                                                                            Не говорите программисту что делать и вам не скажут куда идти. (:
                                                                                                                              +5
                                                                                                                              I am very glad, because I'm finally returning back home
                                                                                                                              +2
                                                                                                                              а меня раздражает вот еще что. Очень часто в программах задается много просто лишних вопросах. Например зачем инсталятор в винде спрашивает меня «такой папки не существует, хотите ее создать?». Было бы странно если бы я хотел установить программу в существующую папку ( чтобы в ней все загадить ). Тогда зачем этот вопрос?

                                                                                                                              Программа должна решать проблемы. Делать простые вещи простыми. Делать их сама. Если программа может решить за пользователя сама, на основе имеющихся данных она должна это сделать. Если программа не может решить за пользователя, но результат некрититчен — программа может использовать действие по умолчанию разрешая в будущем изменить его в настройках ( все программы в линуксе устанавливаются без единого вопроса, с настройками по умолчанию. Кому нужно, тот лезет и менят. Настраивать же программу во время установки — преждевременно, может пользователь еще сам не знает зачем она ему, как же он настроит ее )
                                                                                                                                0
                                                                                                                                Вы совершенно правы. У Купера это называется «вежливость программы». Думаю, советы и рекомендации на эту тему вполне могут заслуживать отдельного поста. Кстати, интересная идея для отдельного поста!
                                                                                                                                  0
                                                                                                                                  > Например зачем инсталятор в винде спрашивает меня «такой папки не существует, хотите ее создать?». Было бы странно если бы я хотел установить программу в существующую папку ( чтобы в ней все загадить ). Тогда зачем этот вопрос?

                                                                                                                                  Так и при попытке установить существующий каталог установщик тоже спрашивает, хотим ли мы.

                                                                                                                                  В этой теме наблюдается зашкаливающее количество переизобретаемого юниксвея.
                                                                                                                                    0
                                                                                                                                    Вы отметили юниксвей в топике или теме?
                                                                                                                                  +4

                                                                                                                                  Этот гениальный «диалог с пользователем» выдает установщик драйверов под фотокамеру Fujifilm F40fd… Слава богу что программа сама не решает перезагрузить систему… можно хоть сохраниться «в фоне»
                                                                                                                                    +4
                                                                                                                                    Меня поражала в Windows-ах очень занимательная аркада: сохранись за 60 секунд до перезагрузки, когда, например, слетал svchost.
                                                                                                                                      +3
                                                                                                                                      Я решал её через «Win+R» и shutdown -a в коммандной строке.
                                                                                                                                    0
                                                                                                                                    Хорошо написано.

                                                                                                                                    И старайтесь использовать только нативные компоненты, сводя к минимуму применение нестандартных блоков, применяя их только там где это действительно необходимо.
                                                                                                                                      0
                                                                                                                                      Спасибо за статью, с интересом жду продолжение.
                                                                                                                                      Статья правильная, особенно с учетом того, что в грустном большинстве отечественных компаний (даже крупных) при попытке сказать «а давайте дизайнеру заплатим за интерфейс» возникают шипы, рога и копыта, сопровождаемые фразами, построенными по одному и тому же принципу «нафиг надо, и так жили и и жить будем»
                                                                                                                                        0
                                                                                                                                        Вопрос найма дизайнера не очень тривиален. К сожалению, кругом много не только плохих программистов, врачей и сантехников, но и дизайнеров. Основателям компании и программистам зачастую страшно доверять незнакомым людям. Ход мыслей такой: этим дизайнерам только б денег получить, а нам этот продукт продавать и их ошибки расхлёбывать.
                                                                                                                                        +1
                                                                                                                                        Я бы посоветовал внимательно смотреть на то, что ИМЕННО предлагает выбранная платформа. Сам я с удивлением узнал, что мои коллеги, пишущие на C#, не знают что WinForms и WPF создают «из-коробки» не нативный вид контролов (та же беда и с другими библиотеками). Из-за таких вещей потом часто изобретаются велосипеды в стиле: «SpinBox — почти как настоящий».
                                                                                                                                        И еще я бы посоветовал не думать, что гайдлайн — «наше все»: любая крупная компания всегда находится на шаг впереди, так как выпускает сначала продукт, а уже потом гайдлайн по нему.
                                                                                                                                          +1
                                                                                                                                          Да в построении интерфейсов в софтваре отрасли еще каменный век, к сожалению. Хотя есть книжки типа «Об интерфейсе», если применять хотя бы 30-50% все было бы значительно лучше. То есть теоретическая база есть, на практике все остается по прежнему.
                                                                                                                                          Надо заметить, что, например, в windows порочные практики в интерфейсе кочуют из версии в версию. Вот уже 7я версия вышла, а перенос файла до сих пор работает по разному, в пределах одного диска он переносится, в пределах разных копируется! То же самое диалоги, механизмы создания диалогов кочуют из версии в версию. Эволюция ОС идет простым добавленим фич и улучшению какого то небольшого % показателей, типа времени загрузки.
                                                                                                                                          Прочитал недавно в книжке одного известного специалиста по windows.
                                                                                                                                          «Microsoft Windows is a complex operating system. It offers so many features and does so much that it's impossible for any one person to fully understand the entire system. This complexity also makes it difficult for someone to decide where to start concentrating the learning effort.»
                                                                                                                                          Что означает, windows настолько сложная система, что никому невозможно понять как же устроена система в целом! Эта сложность создает трудности даже в изучении системы, потому что непонятно с какого края можно начать.
                                                                                                                                          И этой системой пользуется порядка 80% домохозяйств в мире.
                                                                                                                                            0
                                                                                                                                            С этим есть сложность: любое изменение интерфейса очень часто встречается критикой: «работало ж по-другому!». Так что даже если компания понимает свои ошибки, исправлять их может обернуться ещё большими проблемами. Это грустно, поскольку если бекенд можно поправить потом, интерфейс надо делать хорошо пока пользователи не привыкли.
                                                                                                                                            0
                                                                                                                                            сам когда-то заметил такое:



                                                                                                                                            особенности подходов) считаю, что каждый по своему достоен.
                                                                                                                                              +2
                                                                                                                                              Не могли бы Вы пояснить, что именно должно поражать на этой картине?
                                                                                                                                              Пока я вижу лишь два разных меню (меню приложения и меню рабочего стола). Оба весьма перегружены.
                                                                                                                                                0
                                                                                                                                                И оба в чем-то одинаковы тоже :)
                                                                                                                                              0
                                                                                                                                              «повебдванольее» — как сказал. а!

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

                                                                                                                                              Самое читаемое