Проектирование графического интерфейса пользователя



Введение


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

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

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


Общие принципы


  • Интерфейс должен быть интуитивно понятным. Таким, чтобы пользователю не требовалось объяснять как им пользоваться.

  • Для упрощения процесса изучения необходима справка. Буквально — графическая подсказка, объясняющая значение того или иного ЭИ. Полное руководство должно быть частью интерфейса, доступной в любой момент.



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

  • Чаще всего, пользователи в интерфейсе сначала ищут сущность(существительное), а затем действие(глагол) к ней. Следуйте правилу «существительное -> глагол». Например, шрифт -> изменить.



  • Чем быстрее человек увидит результат — тем лучше. Пример — «живой» поиск, когда варианты, в процессе набора поискового запроса. Основной принцип: программа должна взаимодействовать с пользователем на основе наименьшей значимой единицы ввода.

  • Используйте квазирежимы. Например, ввод заглавных букв с зажатой клавишей shift — это квазирежим. С включенным capslock — режим. Основное отличие в том, что человек может забыть в каком режиме он находится, а в квазирежиме(с зажатой доп. клавишей) это сделать гораздо сложнее.



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

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




Какие ЭИ создать?


  • Разработка интерфейса обычно начинается с определения задачи или набора задач, для которых продукт предназначен

  • Простое должно оставаться простым. Не усложняйте интерфейсы. Постоянно думайте о том, как сделать интерфейс проще и понятнее.

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

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

  • Думайте о поведении и привычках пользователей. Не меняйте хорошо известные всем ЭИ на неожиданные, а новые делайте интуитивно понятными.



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


Какой должен быть дизайн ЭИ?


На самом деле, дизайн ЭИ — тема отдельной статьи. Тут нужно учитывать все: начиная от цвета, формы, пропорций, заканчивая когнитивной психологией. Однако, несколько принципов все же стоит отметить:

  • Цвет. Цвета делятся на теплые(желтый, оранжевый, красный), холодные(синий, зеленый), нейтральные(серый). Обычно для ЭИ используют теплые цвета. Это как раз связано с психологией восприятия. Стоит отметить, что мнение о цвете — очень субъективно и может меняться даже от настроения пользователя.



  • Форма. В большинстве случаев — прямоугольник со скругленными углами. Или круг. Полностью прямоугольные ЭИ, лично мне нравятся меньше. Возможно из-за своей «остроты». Опять же, форма как и цвет достаточно субъективна.

  • Основные ЭИ(часто используемые) должны быть выделены. Например размером или цветом.

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

  • Старайтесь не делать слишком маленькие элементы — по ним очень трудно попасть.


Как правильно расположить ЭИ на экране?


  • Есть утверждение, что визуальная привлекательность основана на пропорциях. Помните известное число 1.62? Это так называемый принцип Золотого сечения. Суть в том, что весь отрезок относится к большей его части так, как большая часть, относится к меньшей. Например, общая ширина сайта 900px, делим 900 на 1.62, получаем ~555px, это ширина блока с контентом. Теперь от 900 отнимаем 555 и получаем 345px. Это ширина меньшей части:



  • Перед расположением, ЭИ следует упорядочить(сгруппировать) по значимости. Т.е. определить, какие наиболее важны, а какие — менее.

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

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

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

  • Соблюдайте пропорции

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

  • Делайте отступы между ЭИ равными или кратными друг-другу.

Как ЭИ должны себя вести?


  • Пользователи привыкают. Например, при удалении файла, появляется окно с подтверждением: «Да» или «Нет». Со временем, пользователь перестает читать предупреждение и по привычке нажимает «Да». Поэтому диалоговое окно, которое было призвано обеспечить безопасность, абсолютно не выполняет своей роли. Следовательно, необходимо дать пользователю возможность отменять, сделанные им действия.



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

  • Избегайте двусмысленности. Например, на фонарике есть одна кнопка. По нажатию фонарик включается, нажали еще раз — выключился. Если в фонарике перегорела лампочка, то при нажатии на кнопку не понятно, включаем мы его или нет. Поэтому, вместо одной кнопки выключателя, лучше использовать переключатель(например, checkbox с двумя позициями: «вкл.» и «выкл.»). За исключением случаев, когда состояние задачи, очевидно.


    Такой переключатель напрямую отражает состояние ЭИ

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

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

  • Если задержки в процессе выполнения программы неизбежны или действие производимое пользователем очень значимо, важно, чтобы в интерфейсе была предусмотрена сообщающая о них обратная связь. Например, можно использовать индикатор хода выполнения задачи (status bar).

  • ЭИ должны отвечать. Если пользователь произвел клик, то ЭИ должен как-то отозваться, чтобы человек понял, что клик произошел.


В заключении


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

Литература


Джеф Раскин, «Интерфейс: новые направления в проектировании компьютерных систем»
Алан Купер, «Об интерфейсе. Основы проектирования взаимодействия»
Алан Купер, «Психбольница в руках пациентов»

Similar posts

Ads
AdBlock has stolen the banner, but banners are not teeth — they will be back

More

Comments 90

    0
    Спасибо за статью! Коротко и по делу.

    Кстати, картинка с костром у меня (думаю, не только у меня) ну ни как не ассоциируется с «горячими новинками», для этого очень хорошо подошла картинка с огнем, но без дров. А статья отличная!
      0
      Спасибо. На первый взгляд иконки — это просто. Однако сотни статей и несколько серьезных книг, говорят об обратном.
      +27
      image

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

      И, если можно, поясните про теплые цвета. Не совсем ясно, что подразумевается под тем, что обычно используют их. Все же от элемента зависит.
        0
        Да, по поводу переключателя в стиле iOS вы правы. Однако я отталкивался от принципа, что элемент уже известен и путаницы не возникнет. В любом случае, как указано в статье, checkbox(radiobutton) решит проблему.
        Опираясь на психологию восприятия, могу сказать, что цвет стоит выбирать по ассоциациям, которые он вызывает. Например теплый(желтый) у меня ассоциируется с солнцем, если хотите, с пшеничным полем. Именно в разности ассоциаций у людей и проявляется сложность выбора цвета.
        Однако, если у интерфейса приложения есть определенный стиль(например, сайт про лёд), то холодные цвета(синий) для ЭИ, вполне подойдут.
        Спасибо за ваш комментарий.
          +4
          Я думаю у большинства желтый ассоциируется со знаком предупреждения. Цвета хорошо в bootstrap представлены: getbootstrap.com/examples/theme/
            0
            В любом случае, как указано в статье, checkbox(radiobutton) решит проблему.
            CheckBox и RadioButton — это разные типы контролов, предназначенные для решения разных задач. В вашем примере — ни то и ни другое.

            Жетым цветом в интерфейсе традиционно маркируются предупреждения — Warning Messages, красным — сообщения об ошибках — Error Messages и важные оповещения — Alerts.

            Вообще же, профессионалам очень невредно ознакомиться с Windows User Experience Interaction Guidelines и прочими гайдбуками ведущих компаний.

              0
              CheckBox и RadioButton — это разные типы контролов

              Я специально указал checkbox, поскольку не исключил возможность состояния «не определено».

              Жетым цветом в интерфейсе традиционно маркируются предупреждения — Warning Messages, красным — сообщения об ошибках — Error Messages и важные оповещения — Alerts.

              Конечно, но эти цвета можно применять не только в оповещениях. Пример на вскидку — Angry Birds.

              Вообще же, профессионалам очень невредно ознакомиться с Windows User Experience Interaction Guidelines и прочими гайдбуками ведущих компаний.

              Согласен, это очень хороший совет. Непременно им воспользуюсь.

              Спасибо за ваш комментарий.
            +5
            Не все современные интерфейсы предполагают, что
            Если переводится переключатель влево, то пользователь видит знак «вкл» и переключатель считается в положении «вкл».
            Пруф с моего телефона:

              0
              Я не говорил, что все. Но описанный мной вариант имеет место быть. Мало того, он набирает популярность, что немного удручает. В некоторых реализациях он совсем непонятен интуитивно. А с учетом разных реализаций, которые работают по противоположным принципам, какой-нибудь новый или редко используемый переключатель может надолго ввести в ступор.

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


                  Как-то возникала такая идея — запилить будильник с возможностью выбирать случайное время, подстраивая интервал «пораньше» и «попозже». Потом открыл для себя Sleep as Android. :)
                    0
                    Я предполагал не случайное время, а случайность срабатывания в заданное время. А Sleep as Android — это который якобы с учетом фаз сна работает?
                      0
                      А Sleep as Android — это который якобы с учетом фаз сна работает?

                      Да, по заявлениям разработчиков.
                      За полгода мне так и не удалось подстроить под себя — «умное пробуждение» работает через раз.
                      Продолжаю пользоваться только для ведения статистики времени засыпания и продолжительности сна. :)
                        0
                        А мне апп очень понравился, пожалуй единственный которого мне не хватает на WP.
                        Отлично будит, да и заснуть помогает.
                  +1
                  В данном случае, пользователь переводит знак вправо и видит акцентный цвет(знак вкл), тоже самое только в другую сторону.
                  +2
                  Вы правы, я например в Win 8 не понимаю, когда включен авиа режим, а когда выключен. Совсем непонятно сделано. Мне кажется, что если дописать статус текущий, то это поможет. Например «Функция такая-то сейчас включена».
                    +5
                    Во-1, ориентация выключателя — не стандарт.
                    Попробуйте проинвентаризировать выключатели света по всей вашей квартире.
                    (Лично у меня, я специально требовал от электриков, повсеместно «взмах рукой вниз означает „выключить“»).

                    Во-2, до сих пор не завершился флейм «должно ли на интерфейсе быть состояние или глагол». В первом случае «вкл» означает «сейчас включено», а во втором «нажмите для включения».
                      0
                      1. Все выключатели в квартире также под взмах вверх сделаны. Кроме моей комнаты, где выключатель «замаскирован» и вниз просто как-то удобнее.
                      2. Вот эта проблема тоже напрягает часто. Приходится щелкать и смотреть на изменение состояния системы. Но все же самым логичным я считаю тумблер, у которого подписаны состояния I/0. Там хоть действием считай, хоть состоянием, все равно будешь прав. Аналогично выглядят и переключатели, у которых всегда отображаются оба состояния. А все эти новинки от лукавого.
                        0
                        Да вот, давеча меня товарищ в ВОТ пытался тянуть.

                        Сразу же переключатель с надписями «готов! / не готов» = o_0 ?!

                        Причём надпись такая пылающе алая, что надпись «готов!» воспринимается будто так оно и есть.

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

                        P.S. а пока я был маленький, сантехники извратились и специально перевернули в ванной трубы для двух смесителей так, что в ванной «холодная+горячая», а рядом же над раковиной «горячая+холодная».

                        В дополнение могу отметить их вечный тупой прикол всегда нашлёпки горячая/холодная ставить противоположно.
                          –3
                          Вот такой переключатель вполне удобен. Он отличается тем, что его состояние не «скрыто»:

                            +5
                            Опять же непонятно, есть ли у него промежуточные состояния? И как им пользоваться: нажать, повернуть по дуге или крутануть колёсиком мышки?
                              0
                              Промежуточные состояния если спроектируете, то будут. Например, наверху(на 12 часов) «ждущий режим».
                                +3
                                Существование лишь надписе «вкл» и «выкл» идёт вразрез со шкалой, которая подсказывает, что существует то ли возможность плавного изменения состояния, то ли полсотни фиксированных промежуточных положений (но тогда почему стрелку можно вывести за пределы шкалы?)
                              +3
                              Мой совет — берите пример из реальной жизни, т… из реальных физических интерфейсов:
                              image
                                0
                                Тут за счёт 3d надпись не перекрывается. На картинке в оригинальном посте текущее состояние перекрывалось тумблером. Нужно красивое и компактное решение, учитывающее ваше предложение.
                                  0
                                  Эта картинка вполне описывает подход в общих чертах, понятно, что требуется корректировка под 2D, и такое возможно, к прмиеру: переключатель с двумя надписями вкл. и выкл., при этом при перемещении в сторону вкл. фон пустоты становится зелёным (каким то другим цветом), а при перемещении в сторону выкл. фон становится красным (серым).
                                  Скрытая картинка

                                    0
                                    На картинке снизу Switch из Windows Phone/windows 8. Только у последнего надписи слева.
                                      0
                                      Что же, если поменять надпись и выключатель местами будет даже лучше — молодцы. Хотя для арабских интерфейсов (т.е. для языков с письмом с права налево) будет актуальнее отзеркалить.
                                        0
                                        Не видел арабский интерфейс wp, возможно он и отзеркален.
                                      0
                                      Очень верное решение. Как показывает мой опыт.

                                      Еще ни кто не жаловался. :)
                                  0
                                  действительно, так куда лучше этого запутанного и непонятного чекбокса. «Простое должно оставаться простым. Не усложняйте интерфейсы. Постоянно думайте о том, как сделать интерфейс проще и понятнее.» Зачёт)
                              +5
                              С этими переключателями постоянно беда какая то. Чисто интуитивно их хочется переключить (передвинуть), то есть зажать кнопку мыши, перетащить, отпустить кнопку мыши. Однако в некоторых интерфейсах это сделать невозможно — переключатель сам меняется по клику. То есть нужно кликать. В некоторых интерфейсах наоборот — нужно именно перетащить ползунок, по клику не работает. Иногда работает и тот и этот способ управления. Бывает глючит — вроде перетаскиваешь ползунок, а он обратно возвращается (не до конца перевел).
                              Я что сказать хочу — не нужно морочить людям голову, используйте классический чекбокс. Опять же просто кликнуть гораздо удобнее и быстрее, чем перетащить.
                                +4
                                В том и проблема. Это же чекбоксы по факту. Но такое решение нам навязали, и оно прижилось. Потом все эти навязыватели ушли в минимализм, а переключатели остались. И теперь из-за огромного числа различных вариаций их, приходится каждый раз вдумчиво смотреть и думать: «А что же нам хотел показать автор? Какие духовные проблемы терзали его, когда он проектировал этот очередной невнятный выключатель?»
                                  0
                                  По поводу «не до конца перевёл»: меня люто бесит scroll-bar в венде.

                                  Чуть рука съехала и отпустил мышь вне лифта — считается не скроллил ни разу — сразу же отскок на исходную.

                                  Приходится MouseImp использовать, который такой тупости не имеет. Но тоже есть неудобства.
                                    –1
                                    Это в какой версии Win такая беда? И в каком приложении? Сейчас проверил, в Chrome область где-то в 150px, куда можно уводить курсор, в OOW хоть вообще на другой край экрана помещай курсор, проблемы не возникает (Win7).
                                      +1
                                      Во всех.

                                      Нечто я должен отмерять 150 пикселов, пока внимательно смотрю на тексты? Коли я взялся за скролл, то это однозначно к движению и к результату движения.

                                      А я, понимаешь ли, доскроллился до нужного места и тут — оппа! — отлетаю в начало скроллинга.
                                  +6
                                  С переключателями такими у меня часто проблемы. Обычно воспринимаю надпись на контроле как то действие, которое произойдёт при его (контрола) активации, а с ними получается наоборот.
                                  Вот еще антипример с Google.Forms. В панели управления формы есть кнопочка:
                                  image
                                  Ага, форму только создали, видимо, ответы не принимаются пока. Вот жмакнем кнопку — и будет они приниматься. Нажимаем и:

                                  Т.е. всё-таки они раньше принимались, а теперь — нет?
                                  Возможно, надписи — это косяк локализации, но, в любом случае, по логике этот ЭИ должен быть преключателем, который можно было бы и в виде «вдавливаемой» кнопочки нарисовать…
                                    0
                                    Вот, это самая спорная реализация переключателя. Еще со стародавних времен не мог понять куда двигать переключатель 110\220 вольт на старинных БП от компов. То ли индикация режима, то ли туда надо двигать чтобы 220 v включить. Короче, избавляться от такого.

                                    Вот в «восьмёрке» реализовано правильно.
                                      +1
                                      Точно. Никак не мог вспомнить, где же впервые столкнулся с этим в реальной жизни, да так, что проверять по реакции системы не хотелось. БП же. Спасибо.
                                        0
                                        Я так в школьные годы мамин фен сжёг.
                                      0
                                      Касательно пользовательских настроек — достаточно предусмотреть сброс в дефолт.
                                      А про монотонные интерфейсы можно примеры? Это получается шорткаты не нужны если есть кнопки? Или например если есть Ctrl+C то Ctrl+Insert не нужен?
                                        0
                                        Лучше помимо сброса в дефолт предусмотреть импортируемые профили. Еще меньше проблем.

                                        На шорткаты, думаю, это не распространяется. Речь же сугубо про GUI. А вот сообщать в подсказках к пунктам меню об их существовании — хорошая практика, но нередко забывают об этом.
                                          0
                                          Про импорт согласен.
                                          А про монотонность всё-таки не понятно. Постоянно вижу дублирование. Например пункты контекстного меню(думаю это GUI) часто дублирует основное меню программы. Или в том же хроме новую вкладку можно открыть из основного меню, контекстного меню, нажав на иконку и плюс шорткаты.
                                        +2
                                        Теперь от 900 отнимаем 555 и получаем 375px.

                                        345
                                          0
                                          Спасибо, исправил.
                                          +5
                                          Немного удивил момент про B I U.
                                          Лучше всё же показать пользователю эффект от нажатия кнопки, чем закидывать это в подсказку.
                                          Пример из Google Docs:

                                          image
                                            0
                                            Да, но я имел ввиду тот случай, когда пользователь вообще не знает, что это за кнопка.
                                            Вы правы, немного неудачный пример в этом контексте. Однако, простой.
                                              +2
                                              Однако неудачный )
                                              Для решения проблемы абслютного непонимания, лучше всего делать туториал по использованию системы, тем самым вы можете помочь пользователю быстро научиться пользоваться системой, и одновременно получить возможность создавать более лаконичные интерфейсы.
                                            0
                                            Переключатели, имхо, худшая вещь, которая может быть в дизайне. Даже если для вас очевидна схема управления, всегда найдётся группа пользователей, которые поймут схему не так. Особенно в вебе, где каждый дизайн делает кто во что горазд.

                                            Настоятельно рекомендую по возможности их не использовать, и добавлять нечто, что нельзя понять иначе. Вдавленная кнопка, чекбокс — статус этих компонентов перепутать нельзя (если специально не поставить себе цель создать непонятный чекбокс).
                                              0
                                              del
                                                +1
                                                Есть утверждение, что визуальная привлекательность основана на пропорциях. Помните известное число 1.62? Это так называемый принцип Золотого сечения.

                                                Интересно, кто-нибудь использует это на практике при разработке интерфейса?
                                                  +1
                                                  Я использовал. Один раз. Посмотрел, что получается, выругнулся, эмпирически подобрал подходящие размеры.
                                                    0
                                                    Вот и я хотел сказать что это не просто бесполезная, но даже вредная рекомендация.

                                                    1. Утверждение есть, но его обоснование мягко говоря сомнительное. Помоему последователи тупо подгоняют треугольнички к картинке. Вот вам еще одно утверждение, кстати.
                                                    2. Как правило, разработчики интерфейса сталкиваются с тем что размеры одного или нескольких блоков интерфейса непостоянны (контентая часть — резиновая), а другие фиксированы по ширине. Куда здесь применять сечение?
                                                    3. Имхо попытки руководствоваться подобными «принципами» приводят к тому что проектировщик будет пытаться вписать интерфейс в какие-то мнимые эталоны вместо того чтобы искать гармоничную форму в конкретном случае.
                                                    0
                                                    Вроде как Microsoft использует.
                                                      0
                                                      Вот нашел пример
                                                      Хотя повторюсь, мне кажется здесь тоже притянуто за уши
                                                      0
                                                      Не будем критиковать желание автора объять необъятное. Давайте прокомментируем отдельные пункты, разбив на отдельные ответы.
                                                        0
                                                        Общие принципы В этом пункте перечислены не принципы, а скорее советы.
                                                          –1
                                                          Принципов, на самом деле три. Интерфейс должен быть: понятным, в меру лаконичным и удобным. Но не всегда можно придумать интерфейс пользователя, соответствующий всем трём принципам, нередко вообще приходится выбирать что-то одно, пожертвовав остальным.
                                                            +1
                                                            Честно говоря, ужасные принципы. Удобство — это такая штука, которую нужно раскладывать на составляющие как луч света, проведенный через призму. Иначе все понимают его по-своему. Понятность — тоже абстрактна и очень зависит от целевой аудитории, а значит и от персон. Ведь интерфейс Хабра не понятен китайцам, получается по-вашему, что он плохой. С лаконичностью соглашусь, но опять же не всегда меньше — значит лучше.

                                                            Ну и напоследок скажу основную на мой взгляд вещь — интерфейс должен приносить бизнес-ценность, а лаконичность, удобство и понятность для пользователя — это только интструменты, ими нужно пользоваться только если бизнес от этого выигрывает. Сферическое удобство пользователя в вакууме никому не нужно.
                                                              0
                                                              Удобство зависит больше не от человека, а от решаемой задачи. Заметьте: руль автомобиля в большинстве случаев устроен схожим образом, но совсем иначе чем штурвал самолёта, или корабля.
                                                                0
                                                                В том и дело, что удобство много от чего зависит, поэтому я и говорю, что его нужно раскладывать на составляющие. Составляющая, о которой вы говорите, называется эргономичность, она связана с условиями выполнения задачи и физиологическими особенностями человека, который эту задачу выполняет. На самом деле от человека она тоже зависит, ведь управление инвалидными креслами очень зависят от того какой инвалид за ними сидит и какие возможности ему доступны.
                                                              0
                                                              В стандарте ГОСТ Р ИСО 9241-11-2010 определены 3 основных компонента качества интерфейса:

                                                              1. Результативность — может быть объективно и численно измерена в том, какой процент задач какая доля группы респондентов способна выполнить, отдельно для необученных и обученных пользователей;

                                                              2. Эффективность — может быть объективно и численно измерена как среднее время на выполнение той или иной задачи или количество обрабатываемых выполняемых пользователем задач в единицу времени, в зависимости от класса системы;

                                                              3. Удовлетворённость — может быть объективно и численно измерена опросом по релевантной группе респондентов.

                                                              Нет же, вы продолжаете по-варварски таскать туда-сюда пресловутую несуществующую «интуитивную понятность» и псевдо-эвристики типа «в системе должна быть справка», «каждая функция должна быть достижима не более чем за 5 кликов», которые были ещё в советском стандарте качества софта ГОСТ 28195-89, но которых уже нет в современных стандартах.
                                                            0
                                                            Интерфейс должен быть интуитивно понятным Нет, интерфейс должен быть просто понятным. За счёт того, что он привычен, логичен, хорошо структурирован, имеет хорошую справку и пояснения, за счёт круглосуточной техподдержки, опытных ползователей, и в последнюю очередь требует включения интуиции.
                                                              0
                                                              Интуитивно — значит бессознательно. Т.е. на «автомате».
                                                              В таком интерфейсе работа происходит гораздо быстрее, чем, скажем, в том же Word. Когда полчаса ищешь функцию, отключающую автоформирование списков.
                                                                +1
                                                                Просто словосочетание «интуитивно понятный» встречается настолько часто и в разных контекстах, что кажется, что разные авторы вкладывают в него разный смысл.

                                                                Если под этим понимать «бессознательно. Т.е. на „автомате“», то это зависит не от интерфейса, а от самого пользователя — насколько он знаком с этим интерфейсом. Если я долго работаю с тем же wordом, даже самые неочевидные постороннему действия у меня будут на автомате. К примеру, нажму ctrl+z, если word заменил мне символ там где это не нужно, или Ctrl+Shift+= чтобы ввести показатель степени. А если я бабушка, в первый раз увидевшая компьютер, мне потребуется объяснять даже где на клавиатуре точка и как сохранить документ.
                                                              0
                                                              Используйте квазирежимы Модальность всегда нужно использовать с опасениями. Даже в случае, если режим включен пока нажата клавиша-модификатор, могут потребоваться пояснения, почему этот режим включился и как из него выйти.
                                                                0
                                                                И самое главное — как в него войти вновь.
                                                                  0
                                                                  Если пользователь постоянно держи shift, для того, чтобы печатать заглавные буквы. У него не возникнет мысли, как опять печатать прописными. А, например, тот же capslock можно включить совершенно случайно.
                                                                    0
                                                                    Пример с Shift-ом не самый удачный потому, что пользователи в большинстве своём об этом знают. А если речь идёт о смене кисти в графическом редакторе при нажатом Shift-е, пользователь как минимум должен быть предупреждён, что произойдёт, когда он проведёт курсором по холсту: будет ли проведена прямая линия, взят находящийся под курсором цвет, или изображение будет повёрнуто вокруг центра? Пользователя об этом нужно как минимум предупреждать.
                                                                  0
                                                                  Чем более критической является задача, тем меньше вероятность того, что пользователь заметит предупреждения относительно тех или иных потенциально опасных действий. Из этой фразы сложно понять, что значит «более критическая» и о каких предупреждениях идёт речь.
                                                                    0
                                                                    Дело в том, что фокусируясь на выполнении одной задачи, на восприятие других остается только периферическое зрение.
                                                                    А, как мы знаем, восприятие периферическим зрением много хуже.
                                                                      0
                                                                      Если во время напряжённой работы когда я сфокусировался на чём-то посередине экрана справа в области периферического зрения возникло что-то большое, красное, дёргающее и визжащее, я скорее всего обращу на него внимание и хотя бы на мгновение переведу на него взгляд.
                                                                        0
                                                                        Да-да, это как в антивирусе Касперского. Смотришь фильм, а тут свинюшка как завизжит!
                                                                    0
                                                                    На самом деле, дизайн ЭИ — тема отдельной статьи. На самом деле дизайн ЭИ — тема для отдельного издания тома эдак в три по 500 страниц в каждом.
                                                                    Форма. В большинстве случаев — прямоугольник со скругленными углами. Я поднимаю глаза чуть выше, и вижу элементы: в форме трапеции (вкладки браузера), переллелограмма (кнопка новой вкладки) стрелок, звёздочки. Если я сверну окна, увижу значки разных форм, сильно отличающихся от прямоугольника и круга.
                                                                      +1
                                                                      Это так называемый принцип Золотого сечения. Этот принцип слишком переоценен, про него ходит множество мифов. «Золотое сечение» — далеко не единственный подобный принцип, пихать его куда можно и нельзя — не самое правильное решение.
                                                                        0
                                                                        Перед расположением, ЭИ следует упорядочить(сгруппировать) по значимости. Это — ошибочное представление. Представьте себе книгу, где фразы идут не по порядку изложения, а упорядочены и сгруппированы по значимости
                                                                          0
                                                                          На самом деле так и есть.
                                                                          В любом учебнике начинают с малого(простого), заканчивая более сложным.
                                                                            0
                                                                            Нет не так. В тех же учебниках порой встречаются обратные примеры, когда прежде чем рассказать мне, как написать «hello, world», дают кучу теории.
                                                                          0
                                                                          Делайте отступы между ЭИ равными или кратными друг-другу и вы получите клавиатуру инженерного калькулятора.
                                                                            +1
                                                                            Нет-нет, это даст ощущение надежности и упорядоченности. Тем более, расстояние может быть сколь угодно большим.
                                                                            0
                                                                            Делайте монотонные интерфейсы… это интерфейс, в котором какое-то действие, можно сделать только одним способом. Спорно. Возьмём команду «отменить»: она может быть вызвана кнопкой на панели инструментов, сочетанием клавиш ctrl+z, через контекстное меню и через меню окна. Я должен отказывать от этих способов, чтобы интерфейс был «монотонным»?
                                                                              0
                                                                              Не стоит делать адаптивные интерфейсы, которые изменяются со временем. Обычно, этого не избежать.
                                                                                0
                                                                                Да, согласен. На самом деле базовый принцип ровно обратный: нет вечных интерфейсов, все когда-либо устареет, поэтому единственный способ спроектировать хороший интерфейс — подойти к дизайну как к процессу. Об этом, например, активно говорит Платон Днепровский, очень советую послушать Метрику.
                                                                              0
                                                                              Очень приятно видеть, что вы прочитали Раскина и знаете про Золотое сечение. Но для проектирования интерфейсов этого мало.
                                                                              Все эти принципы должны постоянно визироваться вопросом «Зачем»?
                                                                              Например: зачем избегать двусмысленности? Ведь двусмысленность — это просто свойство, которое (зачастую стихийно) возникает в системе. Если оно мешает достижению бизнес-ценности (что чаще всего и происходит), то ее стоит избегать, но вот бывают случаи, когда и двусмысленность эту бизнес-ценность приносит (например, «Ипотека под 7 процентов годовых!» и звездочка). И двусмысленость становится драйвером продаж, нравится нам это или нет.
                                                                                0
                                                                                Все эти принципы должны постоянно визироваться вопросом «Зачем»?

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

                                                                                (например, «Ипотека под 7 процентов годовых!» и звездочка). И двусмысленость становится драйвером продаж, нравится нам это или нет.

                                                                                Да, продается хорошо, но как «понятный интерфейс» — плохо.

                                                                                Спасибо за ваш комментарий.
                                                                                  0
                                                                                  Ведь я же совсем о другом написал. «Простое должно оставаться простым» — это ведь тоже только средство. Зачем мне делать простой интерфейс? Может быть если я сделаю его простым у меня просядут прибыли (по разным причинам).

                                                                                  Вопрос «зачем» позволяет вам понять зачем вам делать хороший интерфейс. Ведь делать что-то хорошо просто чтобы улучшить мир — это не очень рациональная стратегия. «Стоит ли делать его хорошим здесь и какие конкретно выгоды это принесет бизнесу?» — вот тот вопрос, который нужно постоянно себе задавать.
                                                                                +1
                                                                                В целом советы полезные. Но я немного поворчу по поводу первой картинки, ладно?
                                                                                «Интерфейс» из ЖЧ — бутафорская профанация и кровавые слезы инженера UI\UX и любого мало мальски продвинутого в технике человека. Я проектировал дизайн информационных панелей для разработчика навигационного оборудования судов и частных яхт, перелопатил кучу интерфейсов конкурентов и различных навигационных приборов и индикаторов и неплохо подкачал скил. Не буду вдаваться в подробности, просто проиллюстрирую малую часть ляпов картинкой. Там можно любую деталь брать и плодотворно расковыривать :)

                                                                                картинка
                                                                                  0
                                                                                  А где можно найти правильные реальные примеры панелей? Я имею в виду что-то пооригинальней монохромного дисплея.
                                                                                    0
                                                                                    Да, конечно. Если хотите, могу скинуть свой архив.

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

                                                                                Only users with full accounts can post comments. Log in, please.