Мои правила дизайна хорошего интерфейса

    image

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

    Кстати, если вы используете Figma, я рекомендую обратить внимания на наши готовые дизайн-системы. Они помогают фрилансерам завершать больше заказов в месяц, программистам позволяют создавать красивые приложения самостоятельно, а тимлиды «пробегают» спринты быстрее, используя готовые дизайн-системы для командной работы.

    А усли у вас серьезный проект, то наша команда готова развернуть дизайн-систему внутри организации на базе наших наработок и подогнать под конкретные задачи, используя Figma. Web / desktop, так и любой мобайл. С React / React Native мы тоже знакомы. Пишите в Т: @kamushken


    Акценты и приоритеты


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

    Хороший пример, когда дизайнер дал пользователю понимание, что важно видеть отправителя, затем тему, а уже потом содержание или его @ник в системе:
    image

    Плохой пример, где дизайнер “утверждает”: важнее всего — аватарки, а с остальным как-нибудь разберётесь:
    image

    Отступы и их пропорциональность


    Современный дизайн лёгок, прост и “насыщен воздухом”. Он наполнен дыханием. И не самую последнюю роль в формировании этих ощущений играют отступы. Значительные отступы помогают упростить подачу материала. Но они должны быть подчинены некоторой закономерности и пропорциональности. Я определяю для себя N пикселей в качестве базисного отступа, когда начинаю новый проект. Затем я использую 2N, 3N и так далее пропорциональность для создания визуального баланса, если где-то требуется бОльший отступ.

    Хороший пример, когда дизайнер более менее соблюдает пропорциональность отступов:
    image

    Плохой пример, когда отступы практически базируются на генераторе случайных чисел:
    image

    Текст кнопки всегда первичнее иконки


    Не забывайте, что именно текст является определяющим фактором того, какое ожидание или реакция предварительно сформируется у пользователя при виде кнопки. И лишь изображение иконки вторичным образом дополняет смысл. Изображение колокольчика с надписью “notifications” даёт нам некоторое представление о назначении этого функциона до того, как мы сделали клик. Аналогичный колокольчик без подписи в другом приложении приведёт нас к будильнику, хотя мы скорее всего будем ожидать появление экрана с уведомлениями. Я советую всегда наделять надпись бОльшим “весом” нежели иконки. Их я вообще считаю надувательством. Многие современные интерфейсы вполне способны обходиться и без них. Просто это было бы слишком скучно!

    В целом хорошо:
    image

    Но можно сделать лучше:
    image

    Тоже выглядит неплохо:
    image

    И тут есть, где улучшить:
    image

    Не пытайтесь быть слишком понятными


    Не все проектируемые интерфейсы обязаны быть интуитивно понятными. Существует множество сложных систем, с которыми мы обучались (!) взаимодействовать какое-то время. Возможно сейчас они кажутся нам простыми, но мы не отдаём отчёт, что были исследователями-первооткрывателями первые минуты, часы или более. И коль мы продолжаем работу внутри некоторой изначально сложной системы, видимо ничего не препятствовало нашему пути первых исследований. Скорее всего, дизайнер сделал свою работу настолько хорошо, что мы без труда освоили новую среду. Яркий пример из жизни: попытайтесь на миг представить, что вы не знаете значение математического знака “равно”. Согласитесь, эти две чёрточки — одна над другой, они совсем не кажутся интуитивно понятными. Просто когда-то в школе учитель математики обучил нас этому. Я призываю не пытаться быть понятнее, чем это требуется на минимально необходимом уровне.

    В этом примере дизайнер был чрезмерно понятен с кнопкой закрытия:
    image

    А в этом примере дизайнер оказался чрезмерно понятен с возможностью добавления:
    image

    Перемещение курсора забирает силы


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

    Хороший пример, когда дизайнер предлагает закрыть попап в той же области, которая вызвала его порождение:
    image

    Плохой пример, когда дизайнер отдаляет функционал добавления элемента в список от самого списка:
    image

    Взаимосвязи расположений или единая плоскость


    Это очередной приём балансировки интерфейса. Подобие сетки, если хотите. Например, вы используете трёхколонник. Находятся ли его заголовки в одной плоскости по оси X? Или расположение иконок с кнопками. Можно ли провести мнимую ось Y и обнаружить, что и те и другие аккуратно прилегают к ней? Если ответы утвердительны, дела идут хорошо. Это обусловлено тем, что зрительно человеку легче воспринимать табличный вид из-за структурированности данных. И мы при разработке интерфейса должны располагать элементы с некоторой табличной логикой.

    Плохой пример с несостыковками:
    image

    Хороший пример с гармонией и соответствием:
    image

    Цвет имеет смысл


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

    Пример хаоса: (172 votes зеленым означает ли позитивное состояние? если, да то 280 visitors оранжевым — означает негативное по логике? отнюдь! дизайнер цветом лишь разделил цифры между собой)
    image

    Пример создания порядка и обоснование цвета (я просто добавил графики поверх чужого творчества)
    image

    Хороший пример незлоупотребления цветами:
    image

    В качестве эпилога....


    Выражаю благодарность членам сообщества dribbble, за неформальное согласие предоставить свои работы для данного обзора. Хочу напомнить, что вышеизложенные принципы в дизайне интерфейса являются основными для меня. Я всегда держу их в уме при проектировании интерфейсов. Определитесь на чьей вы стороне… Вы хотите создавать интерфейсы для дизайнеров и работать на лайки (пример — 98% работ с behance) или вы стремитесь решать проблемы пользователя (dribbble)? Кстати, по-моему отличный пример того, как закрытость сообщества позволяет сохранять фокусировку на главном предназначении интерфейсов!
    Share post
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 27

      –2
      Таких выверенных, сделанных по сетке интерфейсов почти нет, а если есть, то у прототипов без реальных задач. Хорошо заметно по концепту YouTube, что если бы они сейчас такое выкатили, то потеряли бы часть людей. Вот эта стерильность создает впечатление «И это все?».

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

      Так же вспоминается пример сервиса, который менял цвет ссылки некоторое время плавно, что бы не потерять конверсию (кажется Amazon).
        +1
        Вот как раз у прототипа и воздается впечатление недоделанности. Пример продукта, который "позаимствовал" отличный дизайн, но при этом выглядит "как-то не так": actor.im. Хоть продукт их и хорош, но пользоваться им не получается — перфекционист против. Дьявол кроется в деталях.
        +7
        Немного не понял из эпилога,
        как отступы и иконки решают проблемы пользователя?

        Хочу сказать, что советы правильные, но не для проектировщика, а для UI-дизайнера (=технического дизайнера).
        При проектировании вообще нужно забить на всё это и заниматься именно решением проблем людей, которые столкнуться с интерфейсом. А вот когда интерфейс спроектирован, при «раскраске» эти советы имеют смысл.

        Я бы добавил ещё к советам кратность размеров шрифта (заголовки N уровней, основной текст и т.п. кратны какому-либо числу).
        И не согласен с иконками — если иконка не отображается смысла подписи, то от неё можно избавиться, т.к. она только отвлекает внимание.
          0
          Спасибо! У меня всегда были проблемы с созданием хорошего UI. Попробую что-то сделать с учетом ваших рекомендаций.
            +1
            Аля, материальный дизайн ;)
            http://www.google.com/design/spec/layout/metrics-keylines.html
              +14
              Согласитесь: что бы кто бы не написал про интерфейсы, всегда есть где поправить или не согласиться.

              Надеюсь вы оценили первую строчку? Я её долго придумывал, потому что дальше будет скучно, ибо:

              • затенять иконки выводя текст на первое место неправильно, так как текст безусловно помогает в понимании иконки, но с возрастанием времени работы человека в интерфейсе эти тексты уже не будут играть первоочередной роли. На первое место будет выходить скорость работы человека в программе, а тут иконки играют важную роль, так как именно графика считывается человеком намного быстрее чем вникание в тексты. Наглядный пример www.outlook.com, попробуйте быстро найти там кнопку "Ответить" или "Переслать".
              • "закрыть попап в той же области, которая вызвала его порождение", вот так вот автор походя призывает создавать модальность (режимы) в программах. Режимы, за которые юзабилисты горят на костре инквизиции.
              • "плохой пример, когда дизайнер отдаляет функционал добавления элемента в список от самого списка", и написано правильно и поддержать хочется, а когда смотришь на иллюстрирующую довод картинку появляется недоумение. На иллюстрации приложение созданное для тач-экрана. Это приложение создано под правую руку, так сказать. Вот и элементы управления все справа (простите левши).
                В качестве эпилога, Дриблл тем и хорош, что оцениваются картинки, а настоящие программы оцениваются в непосредственной работе.
                0
                С возрастанием времени работы начинает работать пространственная и мышечная память — человек просто тыкает в четвертую сверху кнопку или крайний справа табик.
                  +2
                  Это если их 10, а не 30.

                  В старом добром интерфейсе MS Word, при открытии меню "Таблица" я искал нужный мне пункт по иконкам. Возможно если бы мне нужно было вызывать этот пункт каждые 30 минут, то я бы запомнил точное расположение кнопки на уровне мышечной памяти, но в других случаях, если точно знаешь как выглядит иконка, то ищешь именно её, а не текст.
                  0
                  Наглядный пример www.outlook.com, попробуйте быстро найти там кнопку «Ответить» или «Переслать».
                  Там только кнопка «Вход»…
                  0
                  Соглашусь. Мое правило: нельзя абсолютизировать правило, отделяя его от контекста… OH SHI--
                    +8
                    Значительные отступы помогают упростить подачу материала. Но они должны быть подчинены некоторой закономерности и пропорциональности.
                    Отступы необязательно должны быть пропорциональными. Например, знаменитый типограф Ян Чихольд предлагал такие форматы книжной полосы:
                    Van_de_Graaf_canon_in_book_design Golden_canon_of_page_construction Tschichold_medieval_canon Golden_section_page_Tschichold
                    Типографика подчиняется правилу внутреннего и внешнего, которое гласит, что внешние расстояния должны быть больше внутренних. Межсловный пробел должен быть больше разрядки букв, интерлиньяж должен быть больше межсловных пробелов, поля должны быть больше интерлиньжа и так далее. Вот что главное.

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

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

                    Напоследок скажу, что и Dribbble, как и Behance, ориентирован не на принесение пользы, а как раз на создание красивых картинок, не имеющих ничего общего с дизайном. Неслучайно возникло слово «дрибблизация».
                      0
                      Всё ровно наоборот: люди лучше запоминают и распознают иконки, чем текст. Этот феномен называется эффектом превосходства образа. Однако, это не означает, что от подписей не следует отказываться: исследование показывает, что интерфейс, в котором к иконкам нет подписей, пользователи осваивают дольше.

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

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

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

                          Хороший пример, когда дизайнер предлагает закрыть попап в той же области, которая вызвала его порождение

                          Часто бывает, что приложение не настолько отзывчиво, как предполагал дизайнер, и бывают ситуации, когда от нетерпения кликаешь еще раз на action-элемент, а попадаешь по крестику.
                          Не лучше ли наоборот, немного разнести такие элементы?
                            0
                            Это решается на уровне кода. Появился попап — отрисовали кнопку закрытия. Проблема такого подхода в другом, появляются ненужные псевдоанимации и визуальные рифмы.
                            –2
                            Честно ваш дизайн ужасен. Может кому то и понравится, но даже цвета подобраны ужасно
                              0
                              Выражаю благодарность членам сообщества dribbble, за неформальное согласие предоставить свои работы для данного обзора.
                              +2
                              3 цвета, включая оттенки.
                              3 шрифта, включая размеры.
                              Затеняя иконки, вы лишаете объект целостности.
                              Размещая иконки закрытия в непредсказуемых местах, вы порождаете противоречия.
                              Ну и так далее.
                              А вобще, что есть "интуитивно-понятный"?
                              Вот например такой шедевр:

                              image
                              Вам знаком?
                              Для меня он — интуитивно-понятен.
                                +1
                                Главное, давайте возможность в мобильном приложении ставить темное оформление. Светлое бьет по глазам при таком расстоянии.
                                  +2
                                  Хороший пример, когда дизайнер предлагает закрыть попап в той же области

                                  отказался от этого способа…
                                  вы удивитесь узнав сколько людей жмут ссылки как ярлыки в windows (т.е два раза) видел как моё подобное решение отказалось работать у женщины которая открывала окошко редактировать список двойным кликом… первый открыл окно — второй клик моментально закрыл его…
                                  Передвигать кнопку закрытия оказалось проще чем обучить персонал не жать кнопки в браузере 2 раза.
                                    +1
                                    Вы изложили своё видение интерфейсов. Я бы хотел изложить свое. В большей степени я разделяю Ваши предпочтения, кроме одного момента, а именно, для моего визуального восприятия на этой картинке акцента на нужный раздел больше, нежели на предложенном Вами:

                                    image
                                      0
                                      Я не вчитывался в текст, но в конкретно этом примере тоже был возмущён выбором автора. Мне исходный вариант кажется лучшим.
                                      +1
                                      Я придерживаюсь правил «Любой элемент дизайна или улучшает дизайн или ухудшает» и
                                      «Простое лучше сложного».
                                      Если есть текст, иконки нужно убрать. Если иконка понятна (например «принтер»), текст не нужен.
                                      К обязательным элементам я бы добавил всплывающий текст
                                        0
                                        >Не все проектируемые интерфейсы обязаны быть интуитивно понятными.

                                        Статья — прыгание по верхам. Цепляние за частности и свистоперделки без понимания базы.
                                          0
                                          Кстати, обошли стороной анимацию.
                                          Это, конечно, ещё более сложная тема, но всё таки можно пару слов сказать.
                                          Я собрал у себя несколько очень классных примеров — elikov.ru/best-ux-ui-animation.html

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