Pull to refresh

Comments 27

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

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

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

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

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

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

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

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

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

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

Напоследок скажу, что и Dribbble, как и Behance, ориентирован не на принесение пользы, а как раз на создание красивых картинок, не имеющих ничего общего с дизайном. Неслучайно возникло слово «дрибблизация».
UFO just landed and posted this here
Иконку можно толковать по разному

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

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

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

Часто бывает, что приложение не настолько отзывчиво, как предполагал дизайнер, и бывают ситуации, когда от нетерпения кликаешь еще раз на action-элемент, а попадаешь по крестику.
Не лучше ли наоборот, немного разнести такие элементы?
UFO just landed and posted this here
Честно ваш дизайн ужасен. Может кому то и понравится, но даже цвета подобраны ужасно
Выражаю благодарность членам сообщества dribbble, за неформальное согласие предоставить свои работы для данного обзора.
3 цвета, включая оттенки.
3 шрифта, включая размеры.
Затеняя иконки, вы лишаете объект целостности.
Размещая иконки закрытия в непредсказуемых местах, вы порождаете противоречия.
Ну и так далее.
А вобще, что есть "интуитивно-понятный"?
Вот например такой шедевр:

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

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

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

Статья — прыгание по верхам. Цепляние за частности и свистоперделки без понимания базы.
Кстати, обошли стороной анимацию.
Это, конечно, ещё более сложная тема, но всё таки можно пару слов сказать.
Я собрал у себя несколько очень классных примеров — elikov.ru/best-ux-ui-animation.html
Only those users with full accounts are able to leave comments. Log in, please.

Articles