19 posts tagged

интерфейс

Как женский голос на станции завел дизайнера

Стою я на платформе, жду электричку. Тут женский голос вещает: «Электропоезд с сообщением Черепаново–Новосибирск прибывает на первый путь». Я подумал: «Дама интерфейсом-то не вышла…»

Сотрудники РЖД знают, что у поезда есть «сообщение» и для них это объявление звучит понятно. Но для людей, стоящих на платформе нет никаких «поездов с сообщением», есть «Поезд Москва–Владивосток».

Если подумать ещё, то обнаружим, что и слово «Электропоезд» мы в повседневной речи не используем. Не Мы не говорим: «Сашка, не приеду! Я на электропоезд опоздал». Скорее: «Саш, не приеду! Я электричку прое…».

Почему бы не говорить с людьми так, как им понятно: «Электричка «Черепаново–Новосибирск» прибывает на первый путь». Пусть у вас внутри компании это электропоезд с сообщением, а для людей электричка. Если им так привычнее и понятнее.

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

Nov 24   дизайн   дизайн мышления   интерфейс

Простой способ улучшить билеты электричек

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

В руках у меня билет «Москва — Химки». Табло показывают «Москва — Тверь», «Москва — Конаково». И как понять какая из них идет до Химок? Конечно, когда ездишь каждый день, то запомнишь, но я вот неделю ездил и каждый раз Яндекс Электрички мне в помощь. Даже если они все идут через Химки — приезжий этого не знает.

Улучшить ситуацию просто.

Сейчас билет выглядит так:

А нужно сделать так:

Большинство людей в терминале берут билет перед выездом прям, поэтому в большинстве случаев это будет польза. Вывести то, что есть в базе не сложно.

2016   дизайн   интерфейс   улучшить
2014   айфон   интерфейс

Вопросы к 2Гису

Я очень ценю полезное действие 2гиса. Но есть вещи которые не дают мне покоя.

  1. Почему под макось нет клиента?
  2. Почему когда я иду на сайт меня встречает “домашняя страничка”? Когда, в 99 случаях из 100, я иду искать компанию.
  3. Ладно домашняя. Почему действие, которое я выполняю 99 раз из 100 выглядит вот так:

“Перейти”. Почему я 50 раз из 100 жму на “он-лайн версию”. И бля, ура, баннер крутиться! Я могу узнать в чем прелесть он-лайн версии. Да, сука, знаю я все её прелести за ними и пришёл! Почему вы их прячете-то?

Почему существующие клиенты – похуй, а новым – чай, кофе, присаживайтесь, вот у нас как охуенно? Почему сайт не может запомнить, что я уже пользователь, а не потенциальный пользователь?

И это только к сайту вопросы.

2013   2гис   дизайн   интерфейс

Мысмаксом. Шаг вперед

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

Поэтому заказы на разработку интерфейсов пока не принимаем.

Макс нарисовал иллюстрацию. Заибок.

П.С.: Но дизайнера так же ищем.

2013   вакансия   интерфейс   Мысмаксом   пауза

Фламп, подчеркнись!

Дорогой, любимый Фламп. Начни, пожалуйста, подчеркивать ссылки на сайте. Все, а не только те, что вписываются в твой стиль. Перестань бояться, что ты станешь менее гармоничен. Ты сайт, а не газета. Ты интерактивен, а не статичен.

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

Пойми, что вот это слоган:

Его читают.

А вот это ссылка:

Её нажимают.

Слоган – красивее. Ссылку – нажимают. Выбор же очевиден, правда?

Именно поэтому Саня Козин не мог найти, как написать отзыв с ходу.

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

Как только дизайнер сайтов поймет, что он сначала дизайнер интерфейсов, а потом граф дизайнер, его сайтам сразу полегчает.

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

У пользователей есть цели. У вас есть цели. Из них видны сценарии. Напишите их и ошибки сразу видны станут.

2013   дизайн   интерфейс   работа   Фламп

Графический и интерактивный дизайн на одном поле

Я вот что обранил в постах ниже: графический дизайн очень сильно переходит дорогу интерактивному дизайну.

Теперь чуть подробнее:
Дизайнеры, которые делают интерфейсы, сайты и т.д. очень много разговаривают о гармонии, типографики, колористики, композиции, и т.д.

Казалось бы, круто, если наши сайты будут очень приятны глазу. Смотришь и понимаешь, что здесь все отсюда. Все сочитается, все приятно. Гармония. И я согласен, что круто.
Но только у интерактивного дизайна задача показать пользователю что тут можно нажать, что потянуть. Интерактивный дизайн требует от пользователя каких-то действий. Где писать, а где читать. Где ссылка, а где нет. А если мы начнем думать о цвете, красить кнопки в гармонирующие цвета, то мы будем приближаться к статике. К тому дизайну, на который смотрят, а не трогают. Это чиать, а не писать. Это созидать. Это газета, а не сайт.

И вот уже замаячили сайты, который очень четкие, по сетке, с типографикой. И кнопочки слились в единстве с текстом и другими приемами. И смотрим мы на это все, и наслаждаемся. А куда ткнуть нужно, пока так и не понятно.
2012   графдизайн   дизайн   интерфейс

Вопросы, на которые не отвечают дизайн-макеты интерфейса

А если в этом болке текста больше/меньше?
А если пользователь зашел в меню, потом еще в вот сюда и сюда?
А если я прочитал уведомление?
А если пользователь не поставил оценку, где ошибку покажем? Покажем ли вообще?
Сколько фотографий за раз загружаем?
Если у пользователя не заполнена дата рождения – что пишем?
Когда задействовали фильтр, как покажем что он включен, и какие условия включены?
Как вернуться из поиска назад?
Как быстро вернуться домой, когда ты забрался в дебри приложения?

Ответы на эти вопросы – работа дизайнера интерфейса. Пока вы сидите в макетах, вы не знаете даже о cуществовании этих вопросов. Соответственно ответов быть не может. Количество этих вопросов растет с каждым новым билдом, с каждой рабочей версией.

В макетах вы можете нащупать общую дизайн-концепцию. А дальше станете рассуждать о положении кнопочки, сдвигать ее влево-вниз на 10 пикслей, можете подбирать градиентик “по-чище” – что никак не влияет на ключевые дизайн-моменты в интерфейсе. Это графический дизайн. И я настаиваю на том, что граф дизайн часто очень сильно переходит дорогу интерактивному дизайну. Логики в этих направлениях очень разнятся и противоречат.

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

2012   дизайн   интерфейс   проектирование

Мысмаксом для Фламп

Мысмаксом разработали интерфейс приложения Фламп.

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

Пишите отзывы о кофешечках. Пишите, какие вкусные сегодня сырнички, и еще зафотайте их, чтобы друзьями захотелось туда сходить.
Гуляйте теперь с ним под ручку в ручке, ищите крутые места в вашем городе (они скоро придут и к вам). Жалуйтесь на магазинные очереди стоя в этой очереди.

Справедливость не за горами, мои друзья.
Делайте мир лучше вместе с Флампом в кармане.

Сразу как мы закончили с интерфейсом, мы нарисовали дизайн промо-страницы. Что тоже не может не радовать.

Через 3 дня появится процесс на сайте. Не переключайтесь.

2012   интерфейс   Мысмаксом   Фламп

Проектирование интерфейса. Работа со смарт-обджект

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

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

Плюс ко всему, когда клиент видит все экраны сразу, а не по отдельности, он перестает докапываться до никому не важных мелочей “тенюшечка тут мне не нравится что-то”.



И для создания схемы я использую смарт-объекты. Каждый экран – смарт-обджект, в котором хранится псд экрана.

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



По мере проектирования появляются новые шаблонные экраны. Они тоже сохраняются в ту же папку. Нужен список – один псдшник. Нужна карта – другой.

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

В схеме каждый экран имеет свой номер в заголовке.



При работе над косметикой, каждый отдельный псд теперь сохраняется с соответствующим номером. Всем понятно. Да и в разговоре удобнее: “на экране 5.4 хуйня какая-то, а не кнопка”




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

Если в схеме всего 4-5 экранов, на выходе у меня получается один псд со всеми экранами. Вот мне Саня Козин звонит и говорит, типа, чувак, а ты псд не выложил. Там только схема. А я грю это псд, в котором три псд, в которых еще по пять псд. Его мир на миг содрогнулся.

Ну не всё ж программистам над нами издеваться всякими непонятными штуками, пусть они тоже помучаются:)

Кто чего поудобнее знает?
2012   айфон   интерфейс   проектирование
Earlier Ctrl + ↓