SECL Group
Компания
43,20
рейтинг
5 июня 2013 в 12:46

Дизайн → Памятка UX / UI дизайнеру. 19 принципов построения интерфейсов tutorial

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

Создание интерфейсов в проектировании больших сайтов – это самый объемный и один из самых важных этапов. Поэтому я отдельно решил выделить принципы и законы проектирования интерфейсов.

  • Принцип KISS. От англ. «keep it short and simple». Интерфейс должен быть простой и понятный, задачи должны решаться минимальным числом действий, все должно быть понятно и очевидно.
  • Не заставляйте думать. Нужно избегать сложных действий, которые заставляют пользователей думать.
  • Убираем очевидное. Не стоит показывать очевидные элементы интерфейса, нужно сосредоточиться только на действительно необходимых вещах.
  • Соотношение сигнал / шум. В каждом интерфейсе есть важные элементы (сигналы) и маловажные или даже бессмысленные для определенной части системы (шум), естественно, нужно концентрироваться на сигналах и избегать шума.
  • Проверенное лучше модного. Не стоит цепляться за моду и делать что-то только потому, что так делают другие, лучше отдать предпочтение проверенным элементам интерфейса.
  • Привычные элементы управления. В любом современном интерфейсе есть много элементов управления, будет лучше использовать привычные элементы и визуальные образы.
  • Люди не читают, люди просматривают. Пользователи не любят читать большие массивы текстов, не заставляйте их это делать.
  • Принцип умного заимствования. Не стоит изобретать велосипед для стандартных вещей.
  • Кошелек Миллера. В одном функциональном блоке не может быть больше 5-7 элементов, иначе пользователь не сможет удерживать информацию в кратковременной памяти.
  • Принцип группировки. Информацию на странице желательно разбивать на логические блоки (группы), так пользователю легче ориентироваться.
  • Интуитивная понятность. Понимание лучше запоминания.
  • Все полезное на виду. Все важные элементы интерфейса должны быть на виду и соответствующим образом выделены.
  • Принцип 3х кликов. Должно быть не более 3х кликов для перехода из одного раздела в другой. Это же правило применимо к главной странице: любая важная информация должна быть доступна не более чем в 3 клика.
  • Однородность. В больших проектах часто встречается однородный функционал в разных частях сайта (например, комментарии), он не должен отличаться. Это же касается и стиля.
  • Способы решения задачи. Пользователям нужно предлагать способы решения их задач с помощью интерфейса, и эти способы должны быть очевидны.
  • Принцип мостовых перил. Этот принцип еще называют «защита от дурака», пользователей нужно защищать от случайных действий.
  • Правильный копирайтинг. Проектирование интерфейса – это во многом копирайтинг, важна каждая буква, особенно заголовки.
  • Принцип единства. Настройки и элементы управления нужно стараться не прятать в отдельные разделы, а дать возможность управлять из одного места, если это уместно.
  • Тренды. Стоит учитывать современные тенденции, чтобы интерфейс не устарел еще до выхода проекта, но подходить к этому вдумчиво.


P.S. Чтобы получать наши новые статьи раньше других или просто не пропустить новые публикации — подписывайтесь на нас в Facebook, VK, Twitter

P.P.S. Совсем скоро в нашей бизнес-школе Digitov стартует курс: Проектирование серьезных сайтов. Подписывайтесь на курс сейчас и сможете купить его со скидкой.

Оригинал статьи тут: http://seclgroup.ru/article-user-interface-architecture-principles.html

Автор:
Никита Семенов (Facebook, VK, LinkedIn)
CEO
Компания «SECL GROUP» / «Internet Sales Technologies»
Автор: @SECL
SECL Group
рейтинг 43,20
Компания прекратила активность на сайте

Комментарии (62)

  • +18
    Вы очень политкорректно перевели принцип KISS.
    • +1
      Да, KISS — это «Keep it simple, stupid» уже полвека. Не стоит переиначивать.
  • 0
    Как правило, при соблюдение всех этих принципов возникают взаимоисключающие решения для каждого из принципов, или проблемы, не решаемые в нашей вселенной.
    • +1
      Из каждого правила есть исключения. Принципы созданы для помощи, системности и увеличения качества, но при этом не нужно путать их с законами. Это ведь во многом творчество, а значит отступления допустимы.
  • +4
    я бы добавил (хотя это не относится к юзабилити), что сервис или контент должны быть востребованными — это важнее юзабилити.
    если пользователю нужно/интересно — он и длинную статью прочитает, и 7 кликов сделает до нужной страницы. а если контента нет — то хоть обпроектируйся — все равно уйдет.
    соответственно если задача пользвателя или контент требуют нарушения какого-то принципа — надо нарушать. хотя, конечно, лучше следовать :)
    • 0
      Конечно, контент очень важен, не зря ж его королем называют :) Но даже если будет контент качественный, то не все сделают 7 кликов, кто-то все равно уйдет. При создании сайта нужно думать о многих вещах: юзабилити, дизайн, функционал, контент, маркетинг и т.д. Я описываю только один из этапов создания сайта в данном случае.
  • +3
    Всегда охватывает грусть, когда открываю пост про UI или дизайн, а мои надежды увидеть эталонные реализации и примеры рушатся об бетонную стену текста.
    Но это не отменяет полезность текста, разумеется.
    • 0
      Вот, пожалуйста с примерами: secl.com.ua/article-serjoznoe-proektirovanie-serjoznix-saitov.html — это первая статья, с которой и начался цикл публикаций про UX / UI.
      • 0
        Хм… в конце той статьи приходите к «красивой картинке» сайта, где разномастные меню расположены с трёх сторон страницы, а слева и сверху — ещё и в два слоя. И значки кучей мелкого мусора по странице рассыпаны…

        И это эталон юзабилити?..
        • 0
          А ещё там фактическая ошибка — пол у Матрёшки безграмотно изображён. ;)
        • 0
          Нет, это набросок сырой. Просто показано что делается с макетами после проектирования
          • –1
            Ну как же, это ж итог кучи размышлений и советов, изложенных в статье. Не?
            • 0
              Читайте внимательнее
      • 0
        А почему там комментировать нельзя? Discus для себя не открыли и прочие социальные плагины с комментированием?
        • 0
          Комментирования нет сознательно
          • +1
            Чтоб клиенты на критику и отзывы не отвлекались от потребления рекламы?
  • +1
    Верно, но немного противоречиво:

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


    и

    Тренды. Стоит учитывать современные тенденции, чтобы интерфейс не устарел еще до выхода проекта, но подходить к этому вдумчиво.


    Хотя, в целом, я понимаю о чем речь
    • 0
      Мода в данном случае — это что-то новое, но не проверенное. А тренд — это уже проверенная мода. Как-то так. Но в любом случае руководствоваться нужно здравым смыслом и логикой.
      • 0
        >Но в любом случае руководствоваться нужно здравым смыслом и логикой.

        Тоже очень полезный принцип, странно, что его нет в списке.
        • 0
          Ну это слишком по капитански)
  • +2
    Лучший интерфейс — отсутствие интерфейса.
    • +2
      Вы тоже программист, да?
      • 0
        Я за здравый смысл безотносительно профессии.
      • +1
        • –1
          блин, но это ведь плохо…
          • 0
            что именно и чем?
            • 0
              Вот то, что там по ссылке, сайт без дизайна и работы в похоже стиле.
              • 0
                Ну, я б не сказал, что там плохо. Непривычно пустовато — да. Но вот «плохо»?.. нет.
                • +1
                  Ну раз пост о UI, то: глазу тяжело за что-то зацепиться по той как раз причине, что нет интерфейса. По той же причине выглядит это всё неаккуратно, не как профессиональная работа, а как быстренько на коленке сделанная.
                  • 0
                    Во. «Опора для глаза», обозначение точек отсчёта и границ — это важный элемент, да.
                    Дельное наблюдение, спасибо.
    • 0
      Вместо кнопок — оголенные провода, которые надо замкнуть, вместо табличек и фильтров в гуи — консоль для sql-запросов…
      • +2
        Куда-то вас не туда понесло.

        И кнопка, и оголённые провода — это интерфейсы, причём, кнопка значительно проще и удобнее. Другое дело, что кнопка — не самоцель, а по её нажатии должно происходить какое-то полезное действие. Если удаётся придумать такое решение, чтобы это действие происходило, а кнопки не было бы — это и есть лучший интерфейс.
      • +4
        Не совсем верное понимание фразы. Интерфейс должен быть таким, чтобы не воспринимался как прослойка между вами и желанным результатом. И уж тем более, чтобы не отвлекал и требовал много времени на его изучение. Как вполне хороший пример — интерфейс и жесты в Angry Birds (мало жестов, много фана).
  • 0
    Пункты 5 (Проверенное лучше модного.) против 19 (Тренды.) — по принципу «бабушка надвое сказала», их стоит объединить в один или поставить рядом: ).
    • 0
      Я об этом писал в обсуждении выше. Всегда есть старое, новое и ультрановое. Так вот не всегда целесообразно применять только старое, новое тоже важно и нужно. А вот ультрановое — оно может быть непроверенным. Например: есть относительно новый тренд в интерфейсах вместо пагинации делать динамическую подгрузку данных, а есть всякие параллакс-эффекты, которые при скролинге хитрыми способами подгружают контент. Пигинация решает проблему пользователя, динамическая подгрузка решает еще лучше, а вот параллакс — не факт, смотря как спроектировать, но в любом случае это будет ново и непонятно, хотя может и показаться на первый взгляд круто.
  • +8
    Спасибо, кэп.

    Написали мегаочевидные вещи проектировщикам с 10-дневным опытом в индустрии, а хабр хавает...)
    • 0
      Не все же с большим опытом. Специалистов пока крайне мало, многие учатся. Кроме того, даже для опытного UX / UI дизайнера не будет лишним систематизировать знания в своей голове.
  • +5
    А может кто-то из пробегающих мимо UX/UI — дизайнеров объяснит современную тенденцию всех мегапопулярных сервисов скатываться к Alien-like интерфейсам, заставляющим напрягать мозг, изрыгать проклятья и искать альтернативу? Неужели наука интерфейсостроения не развивается, а, наоборот, деградирует со временем? Вы хотите примеры? Да пожалуйста, хрестоматийные монстры: Facebook (без комментариев, даже целая статья где-то была об этом), Gmail за последний год меняет уже 6й интерфейс, и становится все уё хуже и хуже с каждым разом, клиент LinkedIn для айфона можно пользовать только личностям с сильно выраженным аутизмом, и десятки других. Возникает ощущение, что раз примененная «фишка» (вроде тормозящей выезжающей панели с ненужными кнопками) становится «модной» и мгновенно перекидывается в другие смежные продукты. Хочу услышать ответ профессионала в области UX, очень хочу.
    • –1
      Часто интерфейс губит желание засунуть туда абсолютно все. Забыл, кто сказал, вроде японский мыслитель: «Чем проще — тем более востребовано». А интерфейсы Фейсбука, Линкедина и т.д. я тоже не понимаю, как они умудрились так замудрить :)
      • 0
        Я спрашивал вообще-то про тенденцию. Проблемы отдельных интерфейсов мне очевидны. На рынке труда и на фрилансных биржах полно объяв о найме UX-специалистов, значит, и самих специалистов должно быть достаточно. Чем они все занимаются, и где результат?
        • +1
          Проблема в том, что UX-специалисты разработали идеальные работающие решения для любой отрасли, но как правило, не более одного для каждой. В итоге появляются всякие «фишки», которые предназначены для того, чтоб разнообразить «работающее решение».

          Другими словами — основная проблема UX-дизайна в том, что есть решения, которые работают и нет необходимости разрабатывать что-то другое, ввиду того, что это времязатратно, а индустрия требует выполнения схемы бриф→ТЗ→прототип→дизайн→готовый сайт/портал/сервис в достаточно короткий срок. Так и живём, на работе приспосабливаем работающие решения к текущему проекту, а ночью — разрабатываем новое, на которое пока покупателя нет.
  • –1
    Тут Лебедева недолюбливают переодически, но все 19 пунктов сводятся к одному, вроде как его правилу — «Без х*ни!».
  • 0
    Прочитал статью. Не узнал ничего нового. Уже сам текст нарушает 3, 4, 7, 9, 10, 11 и 17 правила.
  • +2
    Не согласен с половиной тезисов. И вообще всегда относился скептически к подобного рода «маст би».
    UX-дизайн, хоть и называется дизайном, должен проектироваться инженерами и психологами в большей степени, нежели дизайнерами, в их классическом понимании.
    Интерфейс должен быть практичным, удобным и привлекательным. Именно привлекательным, а не красивым, правильным, забавным… интерфейс должен быть ориентирован на тех, кто будет им пользоваться. Если его пользователи — шопоголики, почему бы его не сделать «в тренде»? Банкиры, мальчики, девочки, строители, полит. деятели… невозможно сделать интерфейс «для всех».
    По поводу удобства. Если человеку будет значительно удобней 5 кликов, но каждый из них абсолютно интуитивен, то почему бы не сделать 5, вместо 3? Или три клика приведут к разрыву пространственно-временного континуума?
    И про практичность. Под практичностью я понимаю то, что люди привыкают к определенным вещам: выключатель за дверью, молоко в холодильнике, холодильник на кухне… меню должно быть вот здесь или здесь, а форма регистрации должна быть вот тут. Не нужно изобретать велосипед, как вы сами написали.
    • +1
      В Ваших словах есть смысл. Я раньше придерживался примерно такой же позиции. Но чем больше сталкивался с практическими аспектами проектирования, тем больше понимал, что правила все-таки нужны, но из них могут быть и есть исключения.

      Когда-то читал про интересный эксперимент в Google. Смутно помню подробности, но смысл мне хорошо запомнился. Они как-то сделали загрузку главной на доли секунды дольше. Она у них итак супер легкая и грузится моментально, а они сделали на немного дольше. Я готов поспорить, что если провести опрос 100 пользователей, то вряд ли хоть один из них заметил бы их изменение. Но этот эксперимент привел к потере нескольких миллионов долларов. Некоторые люди не дождались, в результате не кликнули на рекламу и Google не получил своих денег. Причем, вероятнее всего, человек нажал загрузку страницы, потом его осенила мысль (которая его не успела бы осенить, если бы страница загрузилась на несколько долей секунды быстрее, его внимание было бы занято появившейся на экране картинкой) и он переключился на другую задачу. Пользователь не заметил изменение времени загрузки страницы, он просто подумал о другом. Это статистически маловероятно, я бы даже сказал статистически ничтожно, но у Google так много пользователей, что даже маловероятная статистика срабатывает.

      Я это к тому, что мелочей не бывает. Вы можете посчитать что-то сущей мелочью, а на самом деле из-за этой мелочи в интерфейсе за год у вас уйдут 10 человек не сделав покупку, а вы не дополучите 1000$ прибыли. Стоит ли эта мелочь внимания проектировщика, который на неё может потратить пусть даже день времени (с проектированием, тестированием и т.д.), который клиенту обойдется в 200$? Я думаю стоит!
      • 0
        По порядку…
        1. Правила нужны. Именно эти правила я и озвучил.
        2. Про эксперимент Google хотелось бы почитать в первоисточнике.
        3. Мелочи бывают, и называются «погрешностью».

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

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

          Про эксперимент сам бы с удовольствием прочитал, но это было давно, ссылки не осталось…
    • 0
      «Дизайнер в его классическом понимании» — это у вас художник, что-ли?
      Если нет, то вполне классическим уже является мнение, что дизайнер взаимодействия обязан быть и психологом, и инженером.
    • 0
      И ещё — практичность и привычность не путаете? Это разные вещи. Иногда привычные подходы практичны, иногда нет.
  • 0
    Не очень понял пункт «Убираем очевидное», можете пример привести?
    • 0
      Справа от этого комментария есть две стрелочки: вверх и вниз. Очевидно, что это голосование за рейтинг комментария, кроме того, при наведении всплывает подсказка. Можно было бы подписать каждую стрелочку словами «Плюс» и «Минус», но этого не сделали, потому, что это очевидный элемент интерфейса.
      • 0
        В целом я понял, но по логике того описания и вашего комментария, раз эти стрелочки — очевидный элемент интерфейса, то их нужно убрать :\
  • +1
    Отличный пример поста, где откровенную рекламу пытаются прикрыть чем-то полезным, но получается ерунда.
  • +1
    Для кого эта статья? Если для новичков, то слишком мало подробностей и нет примеров; если для профессионалов — то слишком много спорного и противоречивого.
  • 0
    Вроде бы на usabilitylab был видео-семинар (не смог найти), где ведущие провели определенные исследования и пришли к выводу, что конкретных доказательств, почему искомый объект должен находиться не далее 3 кликов, не нашли. Вот тут какие-то крохи www.slideshare.net/novmv/169-14584875
  • +1
    Не вижу причины для снобистского высокомерия в отношении этой памятки.
    Да, когда читаешь это списком, все самоочевидно. Когда начинаешь что-то делать реально, из внимания кое-что выпадает. Не далее как сегодня я очередной раз втемяшивал кое-что из этого списка UX дизайнеру с годовым опытом работы.

    Насчет спорности некоторых утверждений — это во-многом зависит от личного опыта с разными сервисами для разных целевых аудиторий. Кроме того, бывают ситуации, когда в UX группах начинаются споры вокруг того, что доказать с цифрами в руках нельзя, и решения принимаются на основе личных предпочтений.
  • +1
    «Люди не читают, люди просматривают.»
    Спасибо за материал. Было бы еще круче сделать подборку ошибок и показать это скриншотами: хорошо, плохо (или неправильно).
    • 0
      Буде писать еще, в том числе подборки примеров разных.
  • 0
    У меня опыта мало, но:
    Убираем очевидное. Не стоит показывать очевидные элементы интерфейса, нужно сосредоточиться только на действительно необходимых вещах.

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

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

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

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

    Этот тезис вытянут за хвост. А как пользователь может решить задачи без интерфейса (среды между человеком и внутренностями машины)? Я бы заменил: «Предоставлять несколько путей решения задачи». Например, одному удобнее горячие клавиши, а другому стандартные меню.

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

      Нужно вообще стараться избегать ситуаций, где результаты действий необратимы и критичны. Когда избежать не удаётся, нужно предупреждать заранее.
    • 0
      У меня опыта мало, но:
      Любой элемент интерфейса должен быть самоочевиден. Подробнее опишут синонимы
      Автор явно имел в виду, что некоторые элементы интерфейса должны быть видны всегда, а некоторые должны появляться при наведении мыши и т.п.

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

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

Самое читаемое Дизайн