Элементы ui: Элементы пользовательского интерфейса (UI) | Данил Фимушкин

Элементы пользовательского интерфейса (UI) | Данил Фимушкин

Пользовательский интерфейс (на англ. user interface, UI) коротко говорят ЮИ — это среда взаимодействия пользователя с компьютером. Это кнопки, меню, радиокнопки, чек-боксы и многое другое. Сейчас не понятно, ниже все заумные словечки объясню. Если человек пользуется мобильным телефоном, то приложения или браузер — это пользовательский интерфейс.

Основные элементы пользовательского интерфейса

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

Тексты (заголовки)

Когда человек в вебе первое, с чем он сталкивается, это тексты и заголовки. Поэтому, нам как дизайнерам, важно прорабатывать сразу все заголовки в одном макете. Заголовки, обычно, называются h2, h3 … Hn, потому что так они называются в тегах html. В данном случае первый заголовок — это h2, далее h3 и так далее. Первый — это наиболее значимый заголовок. В лендинге это может быть на первом экране, дальше по низсходящей. В макетах нужно показывать все зголовки, чтобы верстальщик понимал, где какой тег ставить.

Ссылки

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

Кнопки

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

Радиобаттон и чек-боксы

Слева радиобаттон (по-русски радиокнопка, но буду называть ее радиобаттон поскольку у дизайнеров так принято), справа чек-бокс. В радиобаттоне можно выбрать только 1 вариант, у нас выбран енот. В чек-боксе возможность множественного выбора, у нас выбран тюлень и енот.

Формы

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

Попап

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

Пагинация

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

Хлебные крошки

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

Прелоадер

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

Таблицы

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

Меню

Меню — это навигация по всему сайту. В данном случае показал, что есть всплывающее меню при наведении курсора. Это нужно прорисовывать. Обрати внимание как я показал наведение и интерактивность. Просто скачал курсор png и поставил его на место. Если у тебя большой макет, поставь много курсоров. Например, чтобы показать как работает меню, как выглядят кнопка и ссылка при наведении. При этом не забывай про обычное состояние. Таким образом в статичном макете можно легко показывать как ведут себя элементы юзер интерфейса в интерактивном состоянии.
Помни, что курсоры бывают разные: для PC и для мака.
Гуглятся легко «курсор png». Если показываешь сайт на маке (используешь mock-up c макбуком), то нужно использовать правый курсор, если в PC (например, mock-up с inernet explorer), то левый.

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

UI controls на русском / Хабр

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

Много терминов может показаться банальными и очевидными, но есть и такие, для которых я не нашёл добротных, годных переводов (например grid, toggle button, extender). Т.ч. приглашаются все желающие в комментарии для дополнений, исправлений, размышлений.

Да кому это вообще нужно?

Не будем вдаваться в лингвистические дискуссии. Нам здесь важно лишь то, что некоторым из нас приходится составлять руководства пользователей, договора, закупочную или конкурсную документацию (в т.ч. иногда с учётом требований ГОСТ-ов или других регламентов). Программистам между собой проще и надёжнее разговаривать на рунглише, но есть юристы, ПЭО и прочие делопроизводители, участвующие в согласовании этой документации. Есть определённые правила (писанные и не особо) в праве. Т.ч. деградация русскому в ИТ пока не светит ((:

У некоторых вендоров могут встречаться свои уникальные термины. Но самые основные я собрал тут (уж извиняйте за отсутствие картинок у части контролов):

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

Элементы пользовательского интерфейса, синтаксис и другие особенности

Илья Бирман, арт-директор «Дизайн-бюро Артёма Горбунова», в «Советах», а затем и своей книге «Пользовательский интерфейс» очень доходчиво сформулировал принципы, которым стоит следовать при написании текста для любого интерфейса. Поскольку я постоянно сталкиваюсь с ужасно написанными формами, нелогичными кнопками и другими интерфейсными ошибками, я решил сделать выжимку из этих принципов, о том, какие должны быть элементы пользовательского интерфейса.

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

Кнопка

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

Примеры хороших кнопок для смены статуса

Примеры хороших кнопок навигации

Кнопки, связанные с направлением, — «Назад — Вперёд», «Ранее — Позднее» — лучше заменить стрелками ← →. А лучше — написать, куда именно «вперёд» или «назад».

Не используйте «Дополнительно» или «Ещё» в качестве названий для кнопок. Они не несут информации о том, что произойдёт после нажатия.

Ссылка

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

Кстати, в Студии Лебедева рекомендуют использовать ссылки в качестве команды в случаях, когда рядом должны располагаться две команды: главная — кнопка, второстепенная — ссылка.

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

Лучше, если в ссылке будет два-три слова. Если ссылкой хочется сделать больше слов, нужно отредактировать текст так, чтобы слова были рядом.

Иконка

Подпись иконки должна отвечать на вопрос «Что?» — то, что будет открыто, показано, запущено.

Иконке не нужен глагол, если только он не часть названия программы

Вкладка

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

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

Чек-бокс

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

Радиокнопка, переключатель, выпадающий список

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

В отличие от чек-боксов, радиокнопки всегда образуют группы — выбор из единственного варианта не имеет смысла.

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

Как и чек-боксы, радиокнопки могут уточнять действие. Синтаксис в этом случае аналогичен чек-боксам.

Ползунок

Поле ввода

Поле ввода означает часть предложения, которую пользователь должен вписать сам, а не выбрать из предложенных вариантов. При этом поле может помогать себя заполнить (автодополнение, маска, комбо-бокс).

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

106 бесплатных плоских UI-элементов для дизайнеров. Часть 1

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

Flat AP UI Kit

Featherweight UI – A free, vector based and retina ready UI kit

Flat UI Free – PSD&HTML User Interface Kit

FREE flat UI kit.

UI Kit

Polaris UI Free – User Interface Pack

Square UI Free – User Interface Kit

Freebie PSD: Flat / UI Kit

#flatlyfe UI Kit [FREEBIE]

Flat UI

Blog/Magazine Flat UI Kit

PSD Flat UI Kit Template Vol2

Simple UI Kit with Flat Colors

Free flat UI kit (.psd freebie)

Flat Design UI Kit Vol. 1

EVEN: A FLAT UI KIT

The Free Modern Touch Kit

Free Color UI Kit

Flat UI Kit

SmoothBerry – Free UI Kit

Free Minimal UI Kit

Mega Flat UI Kit

UI Kit – Free PSD

Vertical Infinity – A Mega Flat Style UI Kit PSD

Flat UI Kit (Free PSD)

Metro UI kit

Flat UI Kit

Beach GUI

UI Kit – Free download

Dark UI Kit – Free download

Flat UI Freebie Pack

remember.me – Application Artboards (Free PSD)

Flat Design UI Components

Free Flat UI Kit

Flat dashboard. Free UI kit PSD

Кому и когда нужен UI-кит, как его разработать и зачем делать это самостоятельно

Как только готовы прототипы, известны сценарии поведения пользователя и функции будущего продукта, можно приступать к разработке набора элементов.

Рассказываю, какие шаги нужно пройти, чтобы получился эффективный UI-кит, на примере сервиса «Врач42», который мы разрабатывали в digital-агентстве «Атвинта».

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

Сначала рисуем сетку будущего веб-приложения. Это фундамент проекта. Сетка задаёт ритм в макетах и помогает frontend-разработчикам при вёрстке.

В этом проекте используем сетку из 16 колонок: она позволяет логично и вариативно расположить все нужные элементы.

Подобрали шрифты для заголовков, основного и второстепенного текста в интерфейсе.

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

Основным цветом страницы мы выбрали синий. Он наиболее социально-нейтральный и привычен для сайтов муниципальных учреждений.

После добавляем дополнительные цвета для кнопок и прочих элементов.

Что такое UI и UX дизайн? Что в них общего и что различного? / Хабр

Всем привет! Предлагаем вам изучить простой в освоении материал, чтобы лучше понять разницу между дизайном пользовательского интерфейса (UI) и пользовательским интерфейсом (UX)

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

Ниже, мы подготовили простой в освоении материал по этим терминам.

К концу этой статьи вы будете достаточно хорошо понимать, Что в них схожего и что различного. Итак, давайте приступим!

Что такое UI Design?

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

Эта работа ложится на дизайнеров пользовательского интерфейса (UI-дизайнер). Они решают, как визуально будет выглядеть приложение. Именно они должны выбирать цветовые схемы и формы кнопок — ширину линий и шрифты, используемые для текста. Если обобщить, то дизайнеры пользовательского интерфейса создают внешний вид интерфейса приложения.

Процесс проектирования пользовательского интерфейса от команды Ramotion

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

Что такое UX Design?

«UX» переводится как «пользовательский опыт». Пользовательский опыт приложения определяется тем, как пользователи взаимодействуют с приложением. Является ли опыт пользователя интуитивно-понятными или наоборот запутывает его? Навигация в приложении кажется логичной или не поддающейся логике? Дает ли людям взаимодействие с приложением ощущение, что они эффективно выполняют задачи, которые они поставили перед собой, или это похоже на блуждание по замкнутому кругу и ощущение безысходности? Опыт пользователя определяется тем, насколько легко или сложно взаимодействовать с элементами пользовательского интерфейса, созданными дизайнерами пользовательского интерфейса.

Фото CareerFoundry

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

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

Как эти дизайнеры работают сообща?

Итак, как мы говорили выше, UX-дизайнер решает, как будет работать пользовательский интерфейс, а UI-дизайнер решает, как будет выглядеть пользовательский интерфейс. Это параллельный процесс, и две команды дизайнеров, как правило, работают в тесном сотрудничестве. В то время, как команда UX-дизайнеров разрабатывает, так называемый поток приложения (application flow) и определяет каким образом все элементы будут навигировать пользователя по его запросам и как интерфейс эффективно удовлетворит потребности пользователя в информации, команда UI-дизайнеров работает над тем, как будут выглядеть все эти элементы интерфейса непосредственно на экране.

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

Исследование — ключ к успеху

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

Естественно и UI- и UX-дизайнеры будут исследовать то, чего хотят пользователи. А именно, чего же они ожидают от разрабатываемых приложений? Это исследование повторяется с определенной частотой и включает в себя сеансы так называемых юзабилити-тестов, где реальные пользователи будут взаимодействовать с масштабированными версиями некоторых определенных функций приложения, чтобы определить, в правильном ли направлении движутся дизайнеры. Обратная связь интегрируется с каждой итерацией.

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

Tweet by LukeW

Во всех описанных случаях исследования помогают дизайнерам при финальном принятии решений. Однако информация, которую ищут UI- и UX-дизайнеры, сильно отличается.

Исследования в UI-дизайне.

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

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

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

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

Исследования в UX-дизайне

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

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

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

UI и UX: две совершенно разные дисциплины, которые работают в гармонии

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

Как UI-дизайн, так и UX-дизайн должны быть безупречно выполнены и идеально согласованы с ранее существовавшими ожиданиями пользователей для создания лучшего пользовательского опыта. И лишь когда эти две «звезды совпадут», результаты могут быть поразительными.

Ссылка на английскую версию

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

Мы продолжаем писать про проектирование сайтов и разработку интерфейсов. На этот раз выделили сразу 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»

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

— Как показать элементы пользовательского интерфейса поверх Unity

Переполнение стека

1. Около

2. Продукты

3. Для команд

1. Переполнение стека
   Общественные вопросы и ответы

2. Переполнение стека для команд
   Где разработчики и технологи делятся частными знаниями с коллегами

3. Вакансии
   Программирование и связанные с ним технические возможности карьерного роста

4. Талант
   Нанимайте технических специалистов и создавайте свой бренд работодателя

5. Реклама
   Обратитесь к разработчикам и технологам со всего мира

6. О компании

Загрузка…

.

новейших вопросов ‘element-ui’ — qaru

Переполнение стека

1. Около

2. Продукты

3. Для команд

1. Переполнение стека
   Общественные вопросы и ответы

2. Переполнение стека для команд
   Где разработчики и технологи делятся частными знаниями с коллегами

3. Вакансии
   Программирование и связанные с ним технические возможности карьерного роста

4. Талант
   Нанимайте технических специалистов и создавайте свой бренд работодателя

5. Реклама
   Обратитесь к разработчикам и технологам со всего мира

6. О компании

.

No related posts.