Дизайн конспект: сетки

#⟶ Дизайн конспект
Виды сеток
Блочная сетка — самая простая, часто используется в печатных изданиях. Стандартизированный прямоугольник, содержащий контент или целый экран

Блочная сетка

Колоночная сетка — сетка, основанная на колонках. Ширина между колонками называется gutter. Она побирается в зависимости от ситуации. Когда надо просто отделить элементы друг от друга — ставят минимальные значения.

Колоночная сетка с узким межколонником
Колоночная сетка с широким межколонником

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

Модульная сетка в книгопечатании

Иерархическая сетка — стека с интуитивным расположением блоков.

Иерархическая сетка
2019   2019   Дизайн конспект

Дизайн конспект: немного про дашборды

#⟶ Дизайн конспект

Дашборд — информационная панель. Превью с важной для пользователя информацией. Например: приборная панель автомобиля.

После поступления задачи на разработку дашборда — определите цель панели.

Операционный дашборд

Это панели для предоставления пользователю критически важной информации

Аналитический дашборд

Дашборд, который помогает пользователю анализировать информацию и делать аналитические выводы и принимать решения. Цель — помочь пользователю проанализировать данные.

Когда с целями все понятно — выбираем подходящее представление для информации.

Графики, которые помогут вам увидеть в данных взаимосвязь
Типы графиков, которые помогут вам сравнить значения

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

2019   2019   Дизайн конспект

Дизайн конспект: о работе с пустыми страницами

#⟶ Дизайн конспект

Сразу ремарка: чистые или пустые экраны — это страницы, где еще нет данных. Например: страница с избранными товара, пуста корзина. Смотрим на картинку.

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

Оповещайте пользователя

Заполняйте пустые экраны подходящим содержимым: рассказывайте пользователю, что делать дальше и как это делать.

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

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

Будьте игривыми (там где уместно)
Чистые экраны — пространство для творчества. Можете показать вашу индивидуальность и уместный текст. Можете пошутить

Но не заигрывайтесь с текстом. Учитывайте цели пользователей и контекст. Например, когда пользователь сталкивается с проблемой, объясните, что пошло не так и как с нее справиться.

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

Игратей. Главное — не проиграть:)

Оригинал тут

2019   2019   Дизайн конспект

Дизайн конспект: немного про таблицы

#⟶ Дизайн конспект

Таблицы — отличный элемент. Они везде: на сайтах, в книгах, в газетах и в экселе, черт.

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

Если вы в танке — вот примеры таблиц: все разные.

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

Вот еще несколько примеров таблиц: всмотритесь, найдите общие элементы, возможности и фичи.

Что мы может точно, так это разбить все таблицы на несколько частей:
— нумерация страниц в таблице
— расширенный вид
— режим редактирования
— отображение действий
— настройки таблицы
— ограничение ячеек
— предупреждения
— индикаторы (новые и непрочитанные сообщения, ошибки и так далее)

Нумерация страниц

Заранее предусмотрите тот факт, что страниц в таблиц может быть две, а может и 894. Как быть в такой случае? Как отображать данные, как перейти на страницу 5, а как на 276, и что при этом должен видеть пользователь? Сколько результатов будет видно на одной странице? Продумайте как можно больше реальных и, как вам кажется, нереальных путей развития ситуации. Скорее всего такая нереальная ситуация может оказаться вполне обычной для пользователя.

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

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

Режимы редактирования

Таблицы могут не только отображаться, но и редактироваться. Редактироваться пользователями. Вот так поворот. Если вы, как администратор, редактировали эту таблицу 100 раз, то действие» редактировать», спрятанное внизу таблицы, окрашенное в нейтральный серый цвет и имеющее пиктограмму веселого воздушного шарика  — отличное решение. А вот если вы пользователь, то решение — говно. Ой, ну без обид.

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

Полей в таблице много: как это редактировать, как сохранять? Автоматически?

Не сложно сделать ошибку. А отменить как?
Вот что точно хорошо на картинке в предыдущем интерфейсе — это четкое понимает того, что можно редактировать, а что нет. Точно видно, что дату, например, редактировать нельзя. Решение хорошее, работаем дальше.

Введем общепринятые и почти всем знакомые символы: галочку, крести и карандаш.

Дорабатываем, делаем карандаш синим всегда — редактирование таблицы становится более понятным.

Отображение действий

Чтобы не путать пользователя — все кнопки действий должны быть в одном месте. Главное, чтобы человек не искал подходящую кнопку листая всю таблицу.
С кнопками такая же логика как и со всем. Предусмотрите максимальное количество вариантов: сколько действий несет кнопка, а что если надо 5 кнопок? Кнопки будут текстом или иконками и так далее.

Вот вариант, где действие всегда располагается в конце строки — иконка мусорного ведра и подпись «delete» .

А вот вариант, где два текстовых поля. Каждое выполняет свое действие: «save««cancel»

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

Так как мы все равно собираемся прятать несколько действий в выпадающее меню — то действия можем обозначить текстом.

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

Настройки таблицы

Иногда пользователь хочет видеть нужные ему столбы, и так, как мы ограничены в ширине экрана — то показать все столбцы сразу мы не можем. Пользователь сможет выбрать нужные ему столбцы, но то количество, которое корректно отобразится на экране. Для этого, мы ограничим пользователя. Например, на картинке снизу можно увидеть, что при настройке отображения полей — человек может выбрать только 10, хотя всего их — 13.

Ограничение ячейки

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

via GIPHY

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

Можно сделать так: при наведении на строку с длинным описанием — выделять это в всплывающую подсказку со всем текстом.

Предупреждения

Не забудьте оповестить пользователя о ошибке. Разместите ошибку рядом с тем полем, где эта ошибка появилась.

Индикаторы

Что касается непрочитанных данных — то такие строки можно выделать точкой другого цвета. Но опять есть вопросы: это касается определенной ячейки в строке или все строки?

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


Оригинал — тут.
Копайте глубже, етпа.

2019   2019   Дизайн конспект

Дизайн конспект: всплывающие подсказки или Tooltips

#⟶ Дизайн конспект

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

Как использовать всплывающие подсказки

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

Не делайте так:

В этой форме требования к паролю — во всплывающей подсказке. Это важные данные для завершения регистрации.

Делайте так:

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

2. Размещайте в подсказке краткий и полезный контент. Подсказки с длинным или очевидным текстом бесполезны для пользователя. Не тратьте время пользователя на то, что он знает или то, что ему не нужно.

Не делайте так:

В примере: текст подсказки дублирует текст на кнопке. Зачем?

Делайте так:

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

3. Подсказывайте пользователю не только при наведении мышкой, но и при нажатии кнопки «tab».

Не делайте так:

Когда наводишь мышку — подсказка есть, а когда нажимаешь «tab» — подсказки нет.

Делайте так:

У википедии все в порядке: подсказки есть при наведении мышки и при нажатии на tab.

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

Не делайте так:

Без стрелок в подсказке трудно понять, к чему относится подсказка.

Делайте так:

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

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

Не делайте так:

Подсказки есть только у двух из трех кнопок. Третья не заслужила? Или кажется, что понятно из контекста, о чем эта иконка? Иконка, кстати, о выборе языка.

Делайте так:

Подсказки есть у всех элементов, находящихся рядом друг с другом.

В общем: используйте подсказки по делу, епта.

2019   2019   Дизайн конспект

Дизайн конспект: формы

#⟶ Дизайн конспект

Чтобы купить в оффлайне надо: взять товар и отдать деньги.

Чтобы купить в онлайне:

Пример херовой формы

Формы должны быть максимально простыми с минимальным количеством пунктов.

Вместо выпадающих меню — радиокнопки.
+ всего 1 клик
+ пользователь видит все варианты

Не делайте выпадающее меню в выборе пола. Никогда

Не усложняйте что, что можно сделать в два действия, а лучше — в одно

Спрашивайте как можно меньше
+ сокращение времени на заполнение
+ меньшая нагрузка на пользователя

Заполните и определите сами как можно большее количество полей
+ сокращение времени на заполнение
+ зачем пользователю вводить то, что мы итак знаем

Фокусируйте пользователя в том месте, где он находится
+ пользователь точно знает, что он сейчас заполняет

Если полей много — сегментируйте по смыслу

Предотвращайте ошибки пользователя с помощью ограничителей
+ пользователь заранее будет знать, что он делает не так

Визуально ограничивайте пользователя в размерах вводимой информации

Четко рассказывайте, в чем ошибка

Проверяйте на ошибки сразу после заполнения

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

Отмечайте необязательные поля вместо обязательных к заполнению

Активируйте кнопку перехода к следующему шагу только по факту заполнения формы.

Всегда объясняйте, что и зачем, если запрашиваете специфические данныеё

Поддерживайте людей, не различающих цвета

Как лучше работать с количеством

Локализуйте подсказки в форме
Например, в строчке «название компании» подскажите местную известную компанию

Автодополняйте страны

Выделяйте часто используемые

Заранее сообщайте пользователю о его ошибке, если вам известно это с первого введенного символа

Визуализируйте подсказки, если это поможет пользователю

Ставьте рядом поля с одинаковым типом ввода, чтобы не переключаться на разные варианты клавиатур

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

После открытия страницы с любой формой — вставляйте мигающий курсор и делайте активным первое поле в форме

Предлагайте зарегистрироваться через социальные сети

Вот ссылка на исследования по этому вопросу.

2019   2019   Дизайн конспект