АРУТЮНОВ, заметки с тегом: интерфейс

Полюбить насосы

Sun, 10 Jun 2018 23:17:18 +0300

Софья Коваленок:
— Женя, привет! Я работаю над проектом для фирмы, продающей всякие насосы. Сейчас на стадии прототипа (нужно ли вообще прототипировать дизайнеру или нет — это отдельный вопрос). И тут есть некая дилемма по части визуала. С одной стороны, хочется сделать сайт выделяющийся чем-то, какими-то интересными приемами, с другой — это всё-таки сайт с каталогом насосов, а не брендовых девайсов, соответственно и ЦА у него специфическая... Как прийти к компромиссу? Как оторваться от шаблонных решений, но при этом сохранить доступность восприятия для обывателя?

Софья!

Нужно ли дизайнеру прототипировать или нет, знает только дизайнер. Если ему так проще решить свои сегодняшние задачи, пусть прототипирует. Главное помнить, что самостоятельной ценности нет ни у прототипа, ни у нарисованного дизайна, это всё лишь разная степень детализации.

Я не увидел никакой дилеммы и не считаю, что нужно искать компромисс. Его вообще никогда не нужно искать, потому что когда есть противоречие, нужен способ его разрешить. А компромисс — в каком-то смысле противоположность решению. Об этом можно почитать в советах Артёма Горбунова. Но здесь я и противоречия не вижу.

Хочется сделать сайт, выделяющийся интересными приёмами — а не надо. Надо хотеть сделать лучший в мире сайт про насосы. Чтобы он выделялся своим гениально точным раскрытием темы.

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

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

P. S. В макете всё мелковато и слишком размазано по плоскости, хочется крупнее, компактнее и смелее.

Сделать карточки

Sun, 11 Jun 2017 19:12:32 +0300

Владимир Тицкий:
— Привет! Нужен дизайнерский совет. Делаем продукт — смесь ЦРМ и коллтрекинга. Помогаем клиентам не терять звонки и понимать, работает ли реклама в интернете. Есть полезная функция для бизнеса — квартальные отчёты, чтобы владелец мог посмотреть, как идут дела. Дизайнера у нас в команде нет, поэтому интерфейсы приходится изобретать самим. Долго не могли решить, как отчёт оформить. Обвешивали диаграммами и другими визуальными свистелками, но клиенты только ещё больше запутывались. В итоге я плюнул и оставил только текст и цифры. И это сработало — теперь можно просто скинуть ссылку на отчёт клиенту и не нужно больше объяснять что там написано.

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

Владимир, вот я вас читаю и не согласен. Поэтому сначала поспорим, а потом к делу.

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

— «Обвешивали диаграммами и другими визуальными свистелками...», «... кажется, что вот теперь действительно стоит приукрасить.»
— Но диаграммы — это не спецэффект. Это один из способов сделать информацию понятнее. Не хочу цепляться к словам, но чёрт, с такой установкой инфографику лучше не делать. Не стоит относиться к ней как к способу придать интерфейсу товарный вид. Блин, это не свистелки, это целый язык.

— «... в таком виде выводить данные в программе стрёмно.»
— Неа, не стрёмно. Если текст хорошо справляется с задачей, то пусть будет текст. Сверстать бы его аккуратнее, это да.

* * *

Чтобы превратиться в дашборд, можно сделать карточки:

Может и не прямо вот такие, это уже по ситуации.

Задать свой вопрос

Цвет и буква

Fri, 24 Mar 2017 20:03:12 +0300

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

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

Это с самого начала так работало, но я думал — мало ли, все ошибаются, исправят в ближайшем релизе, забудем. А годы идут.

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

Не делайте так, прошу.

Ненавязчиво

Sun, 11 Dec 2016 12:56:36 +0300

Мария Комарова:

— Привет. У меня есть сайт «Буквы русского», на котором я публикую свои интервью со шрифтовыми дизайнерами. Структура:

Дизайнер 1

Ответ на вопрос 1

Ответ на вопрос 2

...

Ответ на вопрос 16

Дизайнер 2

Ответ на вопрос 1

Ответ на вопрос 2

...

Ответ на вопрос 20

...

Дизайнер 54

Ответ на вопрос 1

Ответ на вопрос 2

...

Ответ на вопрос 8

Тут пока все понятно, получается как в бумажном журнале, серия интервью.

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

Вопрос 1

Ответ дизайнера 1

Ответ дизайнера 2

...

Ответ дизайнера 7

Вопрос 2

Ответ дизайнера 1

Ответ дизайнера 2

...

Ответ дизайнера 15

...

Вопрос 46

Ответ дизайнера 1

Ответ дизайнера 2

...

Ответ дизайнера 11

Как бы это сделать так, чтобы не запутать читателей?

Мария!

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

Интервью — это когда беседа льётся рекой, из вопроса вытекает ответ, из ответа — новый вопрос. Бывает, читаешь интервью и понимаешь, что никакая это не беседа, а заранее придуманные вопросы и вписанные ответы. Фигня.

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

Я предлагаю относиться к совпадениям, как к редкой находке, и оформлять соответственно. Делать сноски на полях: «любопытно, но Эрик Шпикерман наоборот проклинает Гельветику — читайте в нашем интервью». Придумывать специальные инфографические врезки — это если найдутся ответы, которые можно посчитать или как-то ещё формализовать. Любые параллели подавать как редакторское умозаключение, а не интерфейсную фичу.

Некайф, чтобы форма победила смысл.

Задать свой вопрос

Меньше шума, больше пользы

Mon, 15 Feb 2016 10:25:23 +0300

Максим Розов:
— Здравствуйте, Евгений. Спасибо за интересный блог. Хотел попросить вас указать на ошибки и моменты, требующие улучшения, в такой вот схеме рассадки гостей:

Простите, что давно не отвечал. Всем привет!

Максим!

Мало рассказали о задаче. Исхожу из предположения, что схемы предназначены и для клиентов, и для партнёров (например, ивент-агентств). Что обычно их отправляют почтой и смотрят на экране, но иногда могут распечатать и показать на встрече. Что всё это нужно для понимания конфигурации пространства и, собственно, для выбора варианта расстановки.

Первым делом я бы вынес информацию о ресторане на отдельную страницу. На каждой странице можно оставить название ресторана, адрес (без города, только улицу), телефон. Или даже один только телефон. Всё в одну строку, одним шрифтом

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

Сейчас схемы слишком похожи. Так сходу и не поймёшь, чем отличаются. Нужно оставить заметными столы, кресла, стулья, ширму. А всё одинаковое — стены, окна, двери, барную стойку — начертить более тонкими линиями.

В заголовках тоже сейчас больше сходств, чем отличий. Подписывать схему словом «схема» незачем. Нумеровать схемы — тоже. Писать о том, что и так хорошо видно (квадратные столы или круглые) тоже ни к чему. Нужно отбросить шум и сфокусироваться на информации: «Свадьба на 60 человек». Так и написать.

Серый фон не нужен. Зелёный цвет в том виде, как он сейчас используется, тоже не нужен. Иконки я бы убрал, но если оставлять, то привести к одному масштабу, плотности, толщине линий. Танцор немного туалетный.

Главное улучшение: навести порядок в визуальных слоях. Сейчас всё перемешано, за внимание конкурируют два функциональных блока: «показать расстановку» (столы, стулья, подписи к ним) и «рассказать о ресторане» (барная стойка, кухня, винный шкаф), цвет используется бессистемно. Давайте всё про расстановку будет чёрным, а всё о ресторане — зелёным. Станет чище и понятнее.

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

Задать свой вопрос

Когда уже купил

Wed, 12 Mar 2014 19:27:47 +0300

Искал я в интернете надувной матрас. Потом пошёл в магазин (ногами), да и купил его. А большие братья — они же пока только в онлайне за мной следят. То есть, они не в курсе насчёт покупки. И продолжают убеждать:

А надо добавить кнопку «Я это уже купил, отвалите!». В ответ на это они могли бы начать продавать мне насос, например. И, скажем, путёвку в Геленджик.

Грув Хироуз

Mon, 10 Mar 2014 16:59:27 +0300

Набрёл на сайт. Чувства неоднозначные, ребята. Спешу с вами поделиться.

С одной стороны всё плохо, вообще всё плохо. Ну вроде бы так, да? А с другой стороны — по большому-то счёту всё хорошо. Не в том смысле, в каком бывает настолько плохо, что аж хорошо. Нет, в другом смысле.

Смотрите, сначала крупно написано название коллектива — это ок. Ниже заметный работающий аудиоплеер с удобными нормального размера кнопками и ползунком громкости. Список участников. Текст — короткий и по делу. Классная фотка. Одна убедительная цитата. Форма обратной связи (работающая).

Ну короче, по делу у кого-нибудь есть претензии, м?

Адоуби, прекрати

Mon, 03 Feb 2014 19:24:50 +0300

Совершим небольшую прогулку.

В выпадайке из имени выбираю свои подписки, вижу такое:

Выбираю управление подписками, а тут такое:

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

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

Понятно о ссылках

Mon, 27 Jan 2014 09:58:35 +0300

Вообще-то ссылки можно не подчёркивать. Но вы, вот лично конкретно вы — вы обязательно должны подчеркивать ссылки.

Оно почему так? Потому что если на сайте сходу непонятно, где ссылка, а где нет, то это не сайт, а чёрт знает что такое. Но чтобы и без подчеркиваний сделать понятно, надо быть крутым дизайнером. А вы недостаточно крутой дизайнер. Так что подчеркивайте.

Ясно теперь, почему?

В тупике

Tue, 15 Oct 2013 19:34:00 +0300

Я умею работать в Индизайне. У меня лицензионный CS4 с тех самых пор, когда он был свежим, и я не ставил ничего более позднего. Меня всё устраивало, кроме некоторых мелочей — вроде неприспособленности Индизайна к цветовой модели RGB. Я научился попадать в пиксели, и делать вообще всё, что мне нужно. Для меня нет более удобной программы.

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

И столкнулся с проблемами. Отдельной строкой замечу, что не представляю, как вы там смотрите в тёмные панели с белыми текстами и контролами — это что-то запредельное. К счастью, можно вернуть нормальное. Мудацкие кастомные кнопочки (зачем они так?) и тесные перекособоченные панели — тоже ладно, можно привыкнуть.

Но он же не умеет показывать свои собственные пиксели в одном масштабе с пикселями монитора. Хотя раньше, когда он сам ещё ничего не знал про пиксели, обычными своими типографскими пунктами прекрасно попадал. Масштаб 100% больше не показывает так, как раньше. Показывает что-то своё. Допустим, можно подобрать другой масштаб (69%), допустим можно найти скрипт для произвольного изменения масштаба и повесить его на привычный шорткат Cmd+1. Но он всё равно в пиксели не попадает. Можно сделать линию, которая будет отображаться толщиной в пиксель, двинуть её ровно на 20 пикселей выше — и она размажется. Так не годится же.

Рисовать экранное в Фотошопе? Недавно пришлось, и это был ад. Я вынужденно освоил некоторые «упрощающие жизнь» приёмы, но всё равно нет, спасибо. Поставил Фаерворкс. Испытал дикое ощущение беспомощности. Такое же, как некоторое время назад, когда попробовал Скетч. Но про Скетч я сразу понял, что он недостаточно функционален, а про Фарворкс я слышал только хорошее. Он просто другой, а я уже, видимо, недостаточно гибок (возможно, именно ради этой ссылки вам стоит читать всё моё нытьё).

Казалось бы, вот он — момент истины! Прекрати уже рисовать сам, обойдись одними только чужими руками! Покинь зону комфорта, выйди на новый уровень, смасштабируйся, обрети свободу. Нет, не готов. Какая-то странная свобода выходит. Должна быть возможность выбора — нарисовать самому или поручить кому-нибудь. Нельзя совсем без инструмента.

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

UPD. Догадался подобрать дробный масштаб — 69,9%. Вроде пока помогло.

UPD2. Приятно прийти с утра и обнаружить в скайпе точное решение проблемы (скрипт, объясняющий Индизайну правильное экранное разрешение). Спасибо, Саша.