Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 27
Таких выверенных, сделанных по сетке интерфейсов почти нет, а если есть, то у прототипов без реальных задач. Хорошо заметно по концепту YouTube, что если бы они сейчас такое выкатили, то потеряли бы часть людей. Вот эта стерильность создает впечатление «И это все?».
В общем высекать из хаоса удобство, а не полировать работающее наверное лучший подход.
Так же вспоминается пример сервиса, который менял цвет ссылки некоторое время плавно, что бы не потерять конверсию (кажется Amazon).
В общем высекать из хаоса удобство, а не полировать работающее наверное лучший подход.
Так же вспоминается пример сервиса, который менял цвет ссылки некоторое время плавно, что бы не потерять конверсию (кажется Amazon).
Немного не понял из эпилога,
как отступы и иконки решают проблемы пользователя?
Хочу сказать, что советы правильные, но не для проектировщика, а для UI-дизайнера (=технического дизайнера).
При проектировании вообще нужно забить на всё это и заниматься именно решением проблем людей, которые столкнуться с интерфейсом. А вот когда интерфейс спроектирован, при «раскраске» эти советы имеют смысл.
Я бы добавил ещё к советам кратность размеров шрифта (заголовки N уровней, основной текст и т.п. кратны какому-либо числу).
И не согласен с иконками — если иконка не отображается смысла подписи, то от неё можно избавиться, т.к. она только отвлекает внимание.
как отступы и иконки решают проблемы пользователя?
Хочу сказать, что советы правильные, но не для проектировщика, а для UI-дизайнера (=технического дизайнера).
При проектировании вообще нужно забить на всё это и заниматься именно решением проблем людей, которые столкнуться с интерфейсом. А вот когда интерфейс спроектирован, при «раскраске» эти советы имеют смысл.
Я бы добавил ещё к советам кратность размеров шрифта (заголовки N уровней, основной текст и т.п. кратны какому-либо числу).
И не согласен с иконками — если иконка не отображается смысла подписи, то от неё можно избавиться, т.к. она только отвлекает внимание.
Спасибо! У меня всегда были проблемы с созданием хорошего UI. Попробую что-то сделать с учетом ваших рекомендаций.
Аля, материальный дизайн ;)
http://www.google.com/design/spec/layout/metrics-keylines.html
http://www.google.com/design/spec/layout/metrics-keylines.html
Согласитесь: что бы кто бы не написал про интерфейсы, всегда есть где поправить или не согласиться.
Надеюсь вы оценили первую строчку? Я её долго придумывал, потому что дальше будет скучно, ибо:
Надеюсь вы оценили первую строчку? Я её долго придумывал, потому что дальше будет скучно, ибо:
- затенять иконки выводя текст на первое место неправильно, так как текст безусловно помогает в понимании иконки, но с возрастанием времени работы человека в интерфейсе эти тексты уже не будут играть первоочередной роли. На первое место будет выходить скорость работы человека в программе, а тут иконки играют важную роль, так как именно графика считывается человеком намного быстрее чем вникание в тексты. Наглядный пример www.outlook.com, попробуйте быстро найти там кнопку "Ответить" или "Переслать".
- "закрыть попап в той же области, которая вызвала его порождение", вот так вот автор походя призывает создавать модальность (режимы) в программах. Режимы, за которые юзабилисты горят на костре инквизиции.
- "плохой пример, когда дизайнер отдаляет функционал добавления элемента в список от самого списка", и написано правильно и поддержать хочется, а когда смотришь на иллюстрирующую довод картинку появляется недоумение. На иллюстрации приложение созданное для тач-экрана. Это приложение создано под правую руку, так сказать. Вот и элементы управления все справа (простите левши).
В качестве эпилога, Дриблл тем и хорош, что оцениваются картинки, а настоящие программы оцениваются в непосредственной работе.
С возрастанием времени работы начинает работать пространственная и мышечная память — человек просто тыкает в четвертую сверху кнопку или крайний справа табик.
Это если их 10, а не 30.
В старом добром интерфейсе MS Word, при открытии меню "Таблица" я искал нужный мне пункт по иконкам. Возможно если бы мне нужно было вызывать этот пункт каждые 30 минут, то я бы запомнил точное расположение кнопки на уровне мышечной памяти, но в других случаях, если точно знаешь как выглядит иконка, то ищешь именно её, а не текст.
В старом добром интерфейсе MS Word, при открытии меню "Таблица" я искал нужный мне пункт по иконкам. Возможно если бы мне нужно было вызывать этот пункт каждые 30 минут, то я бы запомнил точное расположение кнопки на уровне мышечной памяти, но в других случаях, если точно знаешь как выглядит иконка, то ищешь именно её, а не текст.
Наглядный пример www.outlook.com, попробуйте быстро найти там кнопку «Ответить» или «Переслать».Там только кнопка «Вход»…
Соглашусь. Мое правило: нельзя абсолютизировать правило, отделяя его от контекста… OH SHI--
Значительные отступы помогают упростить подачу материала. Но они должны быть подчинены некоторой закономерности и пропорциональности.Отступы необязательно должны быть пропорциональными. Например, знаменитый типограф Ян Чихольд предлагал такие форматы книжной полосы:
Типографика подчиняется правилу внутреннего и внешнего, которое гласит, что внешние расстояния должны быть больше внутренних. Межсловный пробел должен быть больше разрядки букв, интерлиньяж должен быть больше межсловных пробелов, поля должны быть больше интерлиньжа и так далее. Вот что главное.
Текст кнопки всегда первичнее иконкиВсё ровно наоборот: люди лучше запоминают и распознают иконки, чем текст. Этот феномен называется эффектом превосходства образа. Однако, это не означает, что от подписей не следует отказываться: исследование показывает, что интерфейс, в котором к иконкам нет подписей, пользователи осваивают дольше.
Вы просто испытываете неприязнь к иконкам. Это ваше право, но если вы их заглушаете, они перестают быстро считываться и только создают визуальный шум. Лучше уж их убрать.
Это обусловлено тем, что зрительно человеку легче воспринимать табличный вид из-за структурированности данных. И мы при разработке интерфейса должны располагать элементы с некоторой табличной логикой.Сетка вредна. Она создаёт ложные отношения между элементами вёрстки, мешает выделять главное и заглушать второстепенное. Ненужный ритм следует разбивать.
Напоследок скажу, что и Dribbble, как и Behance, ориентирован не на принесение пользы, а как раз на создание красивых картинок, не имеющих ничего общего с дизайном. Неслучайно возникло слово «дрибблизация».
Текст действительно важнее иконки, а ссылка на "эффект превосходства образа" — хороший пример некорректного применения результатов некого эксперимента в качестве якобы "доказательства".
Про сетку — Горбунов в целом правильно пишет, но при условии, что читатель имеет здравый смысл и не будет трактовать его слишком буквально. Сетки нужны и полезны. Вредно излишне формальное их применение.
Про сетку — Горбунов в целом правильно пишет, но при условии, что читатель имеет здравый смысл и не будет трактовать его слишком буквально. Сетки нужны и полезны. Вредно излишне формальное их применение.
Все верно написал
Спасибо за хорошие рекомендации.
Есть вопрос про
Часто бывает, что приложение не настолько отзывчиво, как предполагал дизайнер, и бывают ситуации, когда от нетерпения кликаешь еще раз на action-элемент, а попадаешь по крестику.
Не лучше ли наоборот, немного разнести такие элементы?
Есть вопрос про
Хороший пример, когда дизайнер предлагает закрыть попап в той же области, которая вызвала его порождение
Часто бывает, что приложение не настолько отзывчиво, как предполагал дизайнер, и бывают ситуации, когда от нетерпения кликаешь еще раз на action-элемент, а попадаешь по крестику.
Не лучше ли наоборот, немного разнести такие элементы?
Честно ваш дизайн ужасен. Может кому то и понравится, но даже цвета подобраны ужасно
3 цвета, включая оттенки.
3 шрифта, включая размеры.
Затеняя иконки, вы лишаете объект целостности.
Размещая иконки закрытия в непредсказуемых местах, вы порождаете противоречия.
Ну и так далее.
А вобще, что есть "интуитивно-понятный"?
Вот например такой шедевр:
Вам знаком?
Для меня он — интуитивно-понятен.
3 шрифта, включая размеры.
Затеняя иконки, вы лишаете объект целостности.
Размещая иконки закрытия в непредсказуемых местах, вы порождаете противоречия.
Ну и так далее.
А вобще, что есть "интуитивно-понятный"?
Вот например такой шедевр:
Вам знаком?
Для меня он — интуитивно-понятен.
Главное, давайте возможность в мобильном приложении ставить темное оформление. Светлое бьет по глазам при таком расстоянии.
Хороший пример, когда дизайнер предлагает закрыть попап в той же области
отказался от этого способа…
вы удивитесь узнав сколько людей жмут ссылки как ярлыки в windows (т.е два раза) видел как моё подобное решение отказалось работать у женщины которая открывала окошко редактировать список двойным кликом… первый открыл окно — второй клик моментально закрыл его…
Передвигать кнопку закрытия оказалось проще чем обучить персонал не жать кнопки в браузере 2 раза.
Вы изложили своё видение интерфейсов. Я бы хотел изложить свое. В большей степени я разделяю Ваши предпочтения, кроме одного момента, а именно, для моего визуального восприятия на этой картинке акцента на нужный раздел больше, нежели на предложенном Вами:
Я придерживаюсь правил «Любой элемент дизайна или улучшает дизайн или ухудшает» и
«Простое лучше сложного».
Если есть текст, иконки нужно убрать. Если иконка понятна (например «принтер»), текст не нужен.
К обязательным элементам я бы добавил всплывающий текст
«Простое лучше сложного».
Если есть текст, иконки нужно убрать. Если иконка понятна (например «принтер»), текст не нужен.
К обязательным элементам я бы добавил всплывающий текст
>Не все проектируемые интерфейсы обязаны быть интуитивно понятными.
Статья — прыгание по верхам. Цепляние за частности и свистоперделки без понимания базы.
Статья — прыгание по верхам. Цепляние за частности и свистоперделки без понимания базы.
Кстати, обошли стороной анимацию.
Это, конечно, ещё более сложная тема, но всё таки можно пару слов сказать.
Я собрал у себя несколько очень классных примеров — elikov.ru/best-ux-ui-animation.html
Это, конечно, ещё более сложная тема, но всё таки можно пару слов сказать.
Я собрал у себя несколько очень классных примеров — elikov.ru/best-ux-ui-animation.html
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Мои правила дизайна хорошего интерфейса