Мои правила дизайна хорошего интерфейса

Немного не понял из эпилога,
как отступы и иконки решают проблемы пользователя?

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

Я бы добавил ещё к советам кратность размеров шрифта (заголовки N уровней, основной текст и т.п. кратны какому-либо числу).
И не согласен с иконками — если иконка не отображается смысла подписи, то от неё можно избавиться, т.к. она только отвлекает внимание.

Спасибо! У меня всегда были проблемы с созданием хорошего UI. Попробую что-то сделать с учетом ваших рекомендаций.

Аля, материальный дизайн ;)
http://www.google.com/design/spec/layout/metrics-keylines.html

Согласитесь: что бы кто бы не написал про интерфейсы, всегда есть где поправить или не согласиться.

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

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

Соглашусь. Мое правило: нельзя абсолютизировать правило, отделяя его от контекста… OH SHI--

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

Отступы необязательно должны быть пропорциональными. Например, знаменитый типограф Ян Чихольд предлагал такие форматы книжной полосы:

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

Текст кнопки всегда первичнее иконки

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

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

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

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

Спасибо за хорошие рекомендации.
Есть вопрос про

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

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

3 цвета, включая оттенки.
3 шрифта, включая размеры.
Затеняя иконки, вы лишаете объект целостности.
Размещая иконки закрытия в непредсказуемых местах, вы порождаете противоречия.
Ну и так далее.
А вобще, что есть "интуитивно-понятный"?
Вот например такой шедевр:


Вам знаком?
Для меня он — интуитивно-понятен.

Главное, давайте возможность в мобильном приложении ставить темное оформление. Светлое бьет по глазам при таком расстоянии.

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

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

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

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

>Не все проектируемые интерфейсы обязаны быть интуитивно понятными.

Статья — прыгание по верхам. Цепляние за частности и свистоперделки без понимания базы.

Кстати, обошли стороной анимацию.
Это, конечно, ещё более сложная тема, но всё таки можно пару слов сказать.
Я собрал у себя несколько очень классных примеров — elikov.ru/best-ux-ui-animation.html