10 заметок с тегом

интерфейс

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

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

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

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

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

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

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

* * *

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

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

2017   интерфейс   отвечаю

Цвет и буква

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

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

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

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

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

2017   восприятие   интерфейс   хинт

Ненавязчиво

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

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

Дизайнер 1

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

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

...

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

Дизайнер 2

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

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

...

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

   ...

Дизайнер 54

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

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

...

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

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

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

Вопрос 1

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

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

...

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

Вопрос 2

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

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

...

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

   ...

Вопрос 46

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

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

...

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

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

Мария!

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

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

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

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

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

2016   интерфейс   отвечаю

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

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



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

Максим!

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

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

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

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

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

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

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

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

2016   интерфейс   отвечаю

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

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

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

2014   интерфейс   наблюдения

Грув Хироуз

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

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

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

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

2014   интерфейс   наблюдения

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

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

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

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

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

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

2014   интерфейс   случай

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

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

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

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

2014   интерфейс   опыт

В тупике

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

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

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

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

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

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

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

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

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

2013   жизнь   интерфейс

Мейлбокс

Прочёл, что Коля поставил себе Мейлбокс, и решил тоже поставить себе Мейлбокс. Отстоял очередь)

У Мейлбокса три проблемы, и все они связаны с медленным интернетом. Видимо, авторы не в курсе про медленный мобильный интернет.

  1. Мейлбокс использует системный статус-бар для индикации текущего состояния. То есть, если он «Коннектинг...», то вы не видите ни который час, ни, что актуально, 3G у вас сейчас или нет.
  1. Он пимкает, когда письмо получено, а не когда загружено. В отличие от Мейла. У тебя медленный нет, вот письмо, а что в нём — «ну подожди, сейчас...»
  1. Он не показывает время последнего обновления ящика. Не всегда понятно — новых писем нет, или это он пока не в курсе.

Такие дела.

2013   интерфейс   мобильное приложение