Полезные советы проектировщикам интерфейсов

[@despoth]

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

[@Pantofobos]

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

[@despoth]

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

[@Autorun]

У гугла отличные дизайнеры, раз вы там не видите дизайна.

[@despoth]

Насколько я понял по скриншоту, речь о заглавной странице google.com — ну дак вот там нет никакой работы дизайнера.
Впрочем, лично я считаю практически все работы под маркой Google средней паршивости, унылыми и лишенными изюминками. Все от Google Mail до Android просто сквозит вторичностью, старомодностью и какой-то неряшливостью.

[@aleks_raiden]

а что такое работа дизайнера и как она оцениваеться? какой критерий, что Х — есть работа дизайнера, а Y — ее нет?

[@despoth]

А чёрти его знает. Я вот точно не знаю.

[@leonid-lapidus]

ну… собственно это хорошо видно.

«А вы не знаете — вот и молчите» (с) Берегись автомобиля

[@mjutu]

ожидаемый ответ от яблофила

[@nsamoylov]

Давайте без ОСизма

[@Deimus]

Работа дизайнера — это когда ненвидишь Apple, но в тайне от всех желаешь использовать весь их стиль/дизайн. НЕработа дизайнера — это когда открываешь любой китайский сайт.

[@kurd]

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

[@rybnadzorro]

В повседневных инструментах не должно быть «изюминок» — их задача быть прозрачными.

[@xqz_me]

У Гугла хорошие дизайнеры, но они явно не дотягивают до уровня, при котором их можно без разбора каждый раз ставить всем в пример. Иначе бы вместо бесполезной кнопки Archive над списком писем в Gmail была бы кнопка Mark as read.

[@tauron]

чем же Archive менее бесполезна чем Mark as read?

[@Autorun]

Я почему-то более чем уверен, что большинство чаще пользуется кнопкой Archive, а не Mark as read. Это вопросы проектирования, ответы на которые находятся в аудитории сервиса, а не в головах дизайнеров.

[@Delfino]

Думаю, что ребята в gmail анализируют статистику нажатий. Иначе — это просто преступление!

[@VolCh]

Статистика вещь такая — запрячь нужную всем кнопку вглубь интерфейса и не получишь ни одного нажатия, хотя поставь её в нужное место и получишь 100500% нажатий.

[@Autorun]

Тут дело не в статистике нажатий, а в потребностях аудитории. Статистика вещь крайне ненадежная и относительная.

[@Stalker_RED]

раньше я использовал archive намного чаще чем mark as read (потому что нужную корреспонденцию читаю а, а ненужная по большей части и так проходит мимо инбокса — фильтрами).

но потом я установил «send and archive» и теперь даже не знаю… писем в инбоксе все меньше и меньше, возможно отдельная кнопка archive стала использоваться реже. :)

[@lexmirnov]

Я бы не назвал Archive бесполезной — не забывайте, что GMail предполагает не удаление, а «архивирование» ненужной почты. Удаление уже следующий шаг.

Также ваш К. О. советует заглянуть в Gmail Labs и установить нужную кнопку оттуда :-)

[@Delfino]

А еще есть шорткаты.

[@sledopit]

И нормальные почтовые клиенты.

[@Delfino]

Они не «нормальные», они — «обычные»! :) Gmail — отличный почтовый клиент. Для себя я замену найти не смог. А ты каким пользуешься?

[@sledopit]

mutt.
хотя тут, как обычно, на вкус и цвет (:

[@kns]

Мне нужны обе кнопки. «Mark as read» есть в labs.

[@kost]

«Mark as read» включается в настройках, а «Archive» — очень полезная кнопка.

[@kost]

Ой, тут уже 100 комментов до меня написали.

[@VakarimaZ]

если меня письмо не интересует, я его убираю с глаз долой кнопкой Archive — и мне всё-равно потом, прочитано оно или нет.

P.S. Кнопкой Mark as unread, которая спрятана в выпадающем списке, пользуюсь чаще, чем Mark as read

[@VolCh]

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

[@gleb_kudr]

У гугла умопомрачительно неудобные интерфейсы. Сами технологии — на высоте. Но разобраться в каком-нибудь adwords, это полный капут… Тот же яндекс в разы удобнее.

Говорю это как человек абсолютно равнодушный что к гуглу что к яндексу как таковым :)

[@Autorun]

Не знаю насчет Adwords, однако почта мне в последнее время более приятна у гугла, чем у яндекса. Все-таки ошибочно будет надеяться, что у гугла над всеми сервисами одна команда работает.

[@naryl]

Логотип на странице поиска гугла действительно идиотский. Вот ИМХО страничка с лучшим дизайном во всём Интернете:

ya.ru/

[@Shersh]

Самая лучшая это вот эта: nichego.net/

[@kns]

И самая бесполезная.

Яндекс все равно выигрывает.

[@Shersh]

Омг, пока в исходник не залез не нашел куда там что вводить.

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

[@naryl]

Если с вкючёнными скриптами открывать, то будет мигать курсор в центре страницы.

[@AlexeyTokar]

тут-то круче: yandex.ru/white.html :))

[@Mansiper]

Ну раз уж так, то вот вам Яндекс без строки поиска. :)

[@Deimus]

Не грузить интерфейс — не значит не обеспечить необходимого функционала!

[@Pawtin]

У ya.ru тоже отсутствует дизайн?

[@despoth]

Есть. Он есть у всего, что предполагает какую-либо функциональность. Вопрос лишь в том, насколько этот пример дизайна важен и достоин для подражания. На мой взгляд, стартовые страницы google.com и ya.ru не представляют никакого интереса для проектировщика интерфейса, потому как несут крайне узкую функциональность и представляют зрителю слишком малый набор управляющих элементов. Другое дло с yandex.ru — вот здесь уже наблюдается обычная для сайтов функциональность, широкие возможности навигации и есть самое главное, самое важное в интерфейсах — структурированная разнородная информация (блоки текста, элементы навигации, кнопки, иконки, изображения и т.п.).

[@Autorun]

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

[@socialNoob]

дизайнер != UI-проектировщик.

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

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

Поэтому рано вешать всех дизайнеров на фонарных столбах.

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

[@socialNoob]

Чтобы не быть голословным, даже на хабре поднималась эта тема

[@VakarimaZ]

Хм. А чем же тогда пром. дизайнеры занимаются? Делают цеха и станки красивыми или всё-таки удобными? Или дизайнер одежды не должен задумываться над её удобством (исключение — haute couture)? Задача дизайнера — сделать конечный продукт (не важно, что это будет) удобным и красивым, потому что даже если ваш сайт будет безумно красивым но с идиотской навигацией, его посещать будут только в случае отсутствия альтернативы (но тогда и красивости никому не нужны), обратное тоже верно.

[@Autorun]

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

[@Autorun]

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

[@Vorchun]

Разделять нужно! Это два процесса: проектирование и дизайн макетов (страниц или чего еще там).

Не путайте проектирование интерфейса и его оформление по брендбуку. Это разные вещи!

Проектирование — это не рисование картинки. Это процесс. Причем сложный. Просто стало модным слово «проектирование». Накидал пару элементов на страницу — вот вам — спроектировал интерфейс. Ха!

[@Autorun]

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

[@ImKremen]

Вы правы, но дизайн это очень широкое понятие.
Дизайнер != Веб-дизайнер.

Цитата из wiki:

For the typical web sites, the basic aspects of design are:

* The content: the substance, and information on the site should be relevant to the site and should target the area of the public that the website is concerned with.
* The usability: the site should be user-friendly, with the interface and navigation simple and reliable.
* The appearance: the graphics and text should include a single style that flows throughout, to show consistency. The style should be professional, appealing and relevant.
* The structure: of the web site as a whole.

[@andoriyu]

Глагне гугля была сделана 100500 лет назад, за это время к ней добавилась панелька быстрого доступа к сервисам гугла и аккаунт гугла. Это не дизаин, логотип не такой уж и хороший + отдает гейской атрибутикой. Я конечно понимаю минимализм это хорошо, но в такой вот дизаин мало чего можно влепить (кроме поисковика и очередного инфаметра)

[@prudis]

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

[@VolCh]

Это не дизайн, а юзабилити :)

[@prudis]

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

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

[@Mezomish]

Дизайн — это не только то, как что-то выглядит.

[@Kinday]

Вы когда-нибудь отвечали простому человеку на вопрос «кем работаешь» одним лишь словом «дизайнер»?

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

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

Поэтому юзабилити удобство использования — это тоже дизайн. А из-за мнения, что дизайн — это только чтоб красиво, и появляются на свет те, кто считает, что дизайн — это творчество.

[@Johan]

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

[@LionAlex]

Вообще, тема со шрифтами с засечками с появлением мониторов с высоким разрешением уже не так актуальна

[@VolCh]

Не актуальна она будет, когда исчезнут мониторы с низким разрешением :) У моего вот 90/96 dpi (при 1600х1200) и менять его в ближайшем будущем не собираюсь.

[@9mm]

А где уже появились мониторы с высоким разрешением?
На десктопе по прежнему ~ 100 dpi как и 10 лет назад.

[@despoth]

Автор просит давать в комментариях советы от проектировщиков интерфейсов.
Вот он, главный постулат любого GUI-дизайнера:

НИКОГДА НЕ СЛЕДУЙТЕ ПРАВИЛАМ ОТ ЯКОБА НИЛЬСЕНА! ЭТО ОПАСНО!

[@aleks_raiden]

что именно там неправильно?

[@punch]

Уж было ретвитнул, начинав читать. Однако увы и ах — тривиально и очень мало.
Практически все описанные приёмы являются аксиомами. И тем не менее, повторение мать учения. Может и перестанут выравнивать текст по ширине.

[@durach]

gotiggr.com/ завалили хабраэффектом?

We are currently down for maintenance.

[@VolCh]

У меня вообще «Ошибка 7 (net::ERR_TIMED_OUT): Тайм-аут операции»

[@medov]

Советую для проектирования интерфейсов использовать Axure.

[@Ruberoid]

«Продолжить покупки» — совершенно неудачное название. Это как в ТФ2 школьники пишут в трейд чат: — «Продам оружия!»

[@lasthero]

Предложите свой вариант.

[@smartello]

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

Невозможно продолжить покупки, можно продолжить покупку.

Kind Regards, Captain O.

[@ZaiSL]

«Продолжить выбор товаров», «Вернуться к товарам». А вообще, от этой кнопки можно с успехом отказаться или заменить на «Закрыть окно».

[@Ruberoid]

Критикуй? Предложи!

Мой вариант: «Вернуться в магазин» при наличии неоднозначности, особенно для представителей старшего поколения (Какой магазин, зачем вернуться?), тем не менее здорово контрастирует с симметричной кнопкой «Оформить заказ».

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

[@Ruberoid]

Куплю шапку билла, продам металл, редкую краску и оружия!

[@VolCh]

Граммар-наци негодуют. Если «покупки» это вещи, то их нельзя продолжить, если «покупка» процесс, то — «продолжить покупку»!

[@Johan]

Можно что-нибудь в духе: «Выбрать еще что-нибудь».
Это правда длинновато, зато, на мой взгляд, довольно дружелюбно.

[@Vorchun]

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

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

Каждый собирает и систематизирует требования и данные как ему удобно.

Потом создаем схемы, потом прототипы. Тут опять же нет супер удобного для всех инструмента. Например, у меня нет возможности купить Axure и я после многих программ и сервисов остановился на Evolus Pencil и Lumzy.com. Гранды, насколько я понял из топиков здесь, пользуются в основном Indesign.

[@Alexsas]

Выше в комментариях люди увидели страницу Гугла и стали спорить о ее дизайне… Зачем о ней вообще говорить? Она работает — и это главное!
Если говорить о дизайне сайтов (приложений), то дизайн там стоит на третьей (последней) строчке по важности.
1. Информация (услуга, действие, результат) — если нет того чего вам нужно, то какое бы оно красивое не было, оно вам не нужно.
2. Работа. (быстродействие, стабильность) — если все работает криво, коряво, вылетает, долго грузится, то поверьте красота не спасет.
3. Дизайн. — При отлично выполненных первых двух условиях дизайн уже появляется сам ).
Остальное просто, чтобы тешить самолюбие.
(↑ Это написал дизайнер)

[@ZaiSL]

Печально, когда разработчики думают, что пользователям не так уж и важно как выглядит продукт. Дизайн появляется САМ? Это правда написал дизайнер?)

[@Alexsas]

Вы не поняли посыла.
Я лишь за то, чтобы не делали дизайн ради дизайна, как тот же интерфейс интернет-банкинга от Сберабанка.

[@GooRoo]

Не выравнивайте текст по ширине (justified). Это затрудняет восприятие из-за пробелов различной длины.

Если использовать переносы, то всё норм imho.

[@despoth]

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

А и верно. Долой кнопку «Отправить». Давайте рисовать кнопки «Отправить файл документа договора поставки шиноподшипников на склад в Нарьян-Маре железнодорожным сообщением из Нальчика». И всем все будет понятно. Давайте и все вертикальные меню похерим. А текст сделаем только черным и толко на белом фоне. И вообще уберем все картинки, фоны, градиенты — это все лишнее, это мешает. Все размещать только в левой части. Сделать одну колнку слева, и в нее все помещать. Использовать только Arial, и никаких излишеств. И будут нам идеальные с точки зрения этой статьи сайты. Тольок скучно будет. Невообразимо скучно.
ОМГ, как же остоданели подобные призывы к неоправданному минимализму.

[@Autorun]

Можно ограничиться «Отправить файл» ;)

[@akral]

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

• «Давайте и все вертикальные меню похерим.»
• «А текст сделаем только черным и толко на белом фоне.»
• «И вообще уберем все картинки, фоны, градиенты — это все лишнее, это мешает.»
• «Использовать только Arial, и никаких излишеств.»

[@SkyKos]

А есть какие-нибудь рекомендации по проектировке уровней вложености меню? Каково рекомендуемое количество пунктов на первом уровне, сколько второстепенных опций лучше упрятать вглубь? Мне всегда казалось, что работает волшебное число Миллера — «7±2» — то есть от 5 до 9 опций. Тот же Gmail — 5 элементов верхнего уровня (Inbox и т.п.), а второстепенные (типа Spam) — в пункте «4 more».

[@const_se]

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

[@mitrichlab]

Артемий аплодирует стоя.
// Кэп тихонько ухмыляется

[@cybd]

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