Как Заказчик настаивал на Comic Sans и другие закулисные моменты реализации сайта для проекта RICE
Расскажу о некоторых закулисных моментах реализации веб-сайта для проекта РИС по доставке блюд японской кухни, который был запущен в г. Хабаровск.
Моя роль в проекте – главный дизайнер.
Как и в любом подобном проекте в нашей студии на меня были возложены следующие задачи:
- Взаимодействие с заказчиком, брифинг;
- Исследование пользователей;
- Прототипирование;
- UI + UX;
- Тестирование пользователей;
- Контроль исполнения front-end.
Заказчик – Вадим: основатель небольшой японской кухни в Хабаровске.
Целевая аудитория
Мужчины и женщины в возрасте 18-30 лет, которые слишком заняты, чтобы ходить по заведениям, но в то же время желающие побаловать себя японской кухней.
Основная задача
Задача для меня как дизайнера была поставлена следующая – спроектировать адаптивный онлайн-магазин.
Его основные функции:
- Каталог товаров;
- Корзина;
- Список акции;
- Информация о компании и др.
Дизайн-задача
Проведя брифинг с Вадимом понял, что онлайн-магазин должен быть минималистичным и функциональным, темным с использованием зеленого цвета (связь с посевным рисом – традиционным японским блюдом).
Фон и сам магазин должен быть темным, и вот почему:
Дизайн-философия заказчика
– сказал Вадим, когда мы познакомились ближе.
Кстати, возможно, поэтому сейчас так популярны "темные темы".
User Research
Приняв философию Вадима, решил приступить к небольшому исследованию пользователей прежде, чем заниматься прототипированием.
Исследование проводилось в виде интервьюирования в общежитии, среди студентов, которые уже заказывают блюда японской кухни.
Результаты – ниже:
Вообще эта статья написана уже через год после запуска проекта. И только на момент её написания, по возвращении к результатам исследования, понял, что не реализована важная функция – поиск. Хотя исходя из ответов уже на первый вопрос становится понятно, что она необходима.
Чтобы это исправить недавно связался с Вадимом и предложил ему реализовать эту функцию у той студии, в который был разработан сайт. Ведь как же интернет-магазин может существовать без функции поиска?..
Я также проводил тестирование пользователей уже по готовым макетам, задавая конкретные сценарии и выслушивая мысли пользователей по ходу их выполнения. Но хронология изменений интерфейса по результатам тестирования не велась, поэтому не получится отобразить это здесь.
Comic Sans
Как оказалось, Вадим очень любит Comic Sans, чего не скажешь обо мне. Он настаивал на его использовании, я – на обратном, ведь игривый тон этого шрифта не вяжется с образом онлайн-магазина блюд японской кухни, у которого вышеописанная целевая аудитория.
Но мои дизайнерские аргументы против использования Comic Sans в проекте не работали, поэтому решил предложить Вадиму следующий ход:
я присылаю макет со шрифтом Comic Sans и 2 макета с другими, мною выбранными. Далее – Вадим показывает все 3 макета своим друзьям, знакомым и они высказывают свою точку зрения.
Выбор опрашиваемых пал на мои шрифты. Вадим, конечно, не был рад этому, но принял это, за что я благодарен, т.к. мне не безразлична судьба проекта.
Проблемы в ходе реализации
В итоге мы все же запустили проект, но столкнувшись с некоторыми проблемами:
1. Фотографии плохого качества
Изначально у нас не было фотографий блюд от Вадима, поэтому мы сами подобрали подходящие, чтобы хоть как-то демонстрировать конечные результаты. Да и честно говоря, сам концепт создавался, отталкиваясь от вертикально-вытянутых фотографий блюд, что и Вадиму понравилось.
Все, запустили проект на тестируемом домене, почти все отладили с точки зрения дизайна и верстки, но пока без реальных фотографий. Ждали их.
Спустя некоторое время Вадим присылает их, но, видимо, нанятый фотограф оказался не совсем компетентен, либо был ограничен ресурсами – фотографии были не эстетичными и не подходили по композиции к макету. Тут уже и я промахнулся, т.к. поздно прислал требования по размерам фотографий.
Как потом выяснилось – фотограф не был ознакомлен с макетом сайта. Быть может, если бы он уловил закладываемую концепцию – результат был бы лучше.
2. Front-end
Взаимодействие с разработчиком был не отлажен – он не показывал мне промежуточные результаты своих трудов на более ранней стадии, чем надо было. Да и я контролировал процесс реализации верстки не так, как положено. В итоге – приходилось разработчику некоторые вещи переделывать.
Видимо, в этом и моя заслуга тоже есть, раз возникало недопонимание между мной и разработчиком.
3. Кража (или нет) идеи
Еще на ранней стадии реализации проекта в городе кто-то запустил тоже сервис доставки блюд японской кухни и с таким же названием РИС.
Вадим связался с нашей студией и рассказал об этом, выражая беспокойство. Но все обошлось: мы убедили, что нашей вины в этом нет.
Инсайты
А из самого проекта я вывел следующее:
- Светлый контент на темном фоне в большинстве UI/UX-случаях приоритезирует контент.
- Если дизайн, выполненный по требованию заказчика, не нравится дизайнеру – это не означает, что он плох. Возможно, Заказчик лучше знает свою аудиторию, их предпочтения. Но возможно и обратное – когда дизайнер лучше знает ЦА.
И это, считаю, главная задача дизайнера – угождать дизайном не дизайнеру или заказчику, а конечному пользователю. - Надо быть аккуратнее при работе с проектами, не рассказывая о нем кому-либо. NDA (non-disclosure agreement – соглашение о неразглашении) важен.
Особенно касается стартап-проектов: у кого-то может иметься больше ресурсов и амбиций на реализацию, пока вы в это время усердно работаете над прототипом.
С дизайн-кейсом проекта можете ознакомиться на Behance.
На тот момент это был один из первых моих кейсов, над которым я корпел.
Результат должен был выйти следующий:
P.S. С тех давних пор все пошло не так, что теперь макет и реальность сильно разнятся, но все же ссылку на проект даю – ris-khv.ru.
Статья напоминает переживания пятиклассника, который хотел покататься на коньках. Как он их надевал, открыл для себя как проще шнуровать. Потом его дядя Саша отвёз на каток, но дал покататься всего 40 минут, потому что надо было ехать назад. Надо было все 40 минут кататься, а не отдыхать каждые 15 минут, так бы больше получилось. Это важный инсайт, надо поделиться со всеми. Ещё добавить диаграмму количества проеханных кругов на катке от времени.
Автору желаю продолжать писать, к выбору тему подойти тщательно.
Комментарий недоступен
Радикально поняли мои взгляды. Но, может, в некоторых моментах Вы и правы.
Спасибо за критику. Мне полезно будет.
Комментарий недоступен
В двух словах: вокруг все долбоёбы, автор трудился как пчёлка, но похоже вместо мёда получил инсайты (три штуки).
Сайт мне не понравился. Статья вода.
А ну да, ещё мы выяснили, что после 30 суши не жрут в Хабаровске.
Комментарий недоступен
Насчет воды: изначально писал сухо, но потом решил добавить эмоциональности, живости.
Но, видимо, не вышло.
Если бы аудитория включала и 30+ – сайт пришлось бы делать визуально попроще, не таким дерзким.
Это у вас откуда такой домысел?
"Темные темы" сейчас больше заходят молодежи.
Я повторю вопрос: это у вас откуда такой домысел? И ничего, что материалы японских ресторанов у нас в стране традиционно выполнены в темных тонах? Не только сайты, я про наружку, меню и прочее.
Кстати, а презентации Apple с фиг знает какого года – это тоже тёмные темы, которые заходят молодежи?
Отвечаю: мой личный домысел, основанный на личном наблюдении.
Основная ЦА Apple – разве не молодежь? Apple – новаторы. Консерваторам новации не нужны. И Apple, кстати, зарубежный поставщик, а мы говорим про российский рынок, Хабаровский.
Комментарий недоступен
Объясните тогда, почему люди 40-50-60 лет пользуются айфонами, айпадами и макбуками, покупают себе их сами и следят за новинками?
Сколько людей такой категории из Хабаровска покупают себе сами такие устройства?
Я вот точно не скажу, чего, думаю, и Вы не скажете.
Вся эта мысль – родившаяся из моего личного опыта, мало, чем подкрепляющаяся.
да вы упячку, видать, не застали
Так он и не дерзкий
Вадим & Comic Sans
Когда с Вадимом по телефону разговаривал, по-моему, он в таком настроении и был.
А вот, кстати, в следующим проекте с ним мне не удалось его переубедить и теперь аукцион по продаже автомобилей излучает радость 😄
Идея ничего не стоит. Если даже "украли" - это вина того, у кого "украли"
NDA - это не про общие детали, а про имплементацию.
Если разработчики слили название сайта, домен, какие-то протитипы - то это уже украли.
По дизайну: читать белый текст на тёмном фоне очень сложно.
Не подумал, надо было мне уточнить: читать белый текст на черном фоне – сложно, если текста много. Думаю, с этим и Вы согласитесь.
Комментарий недоступен
Комментарий недоступен
Возможно, все это случайно вышло.
Бывает, когда одни идет приходят разным людям в одно время.
«Если дизайн, выполненный по требованию заказчика, не нравится дизайнеру — это не означает, что он плох.»
К сожалению, это означает, что он плох. Нельзя рисовать и предлагать то, что самому не нравится.
Когда писал эту строчку – тоже задумался, но вспомнил случаи, когда Заказчик настаивал на определенных дизайнерских требованиях. В некоторых случаях я был бессилен противостоять упрямству, но что в итоге, наверно, уменьшает мою ценность.
суши в Хабаровске стоят 1900₽…?
могу предложить взять за правило использовать реалистичный контент. даже если вы хотите проверить, что в макет влезает лишний разряд числа, мне кажется круче всего показывать макеты клиенту (и всем остальным) так, как будто это уже реальный запущенный сайт.
P. S.
я дорисовываю к макетам сайтов интерфейс браузера. вдруг покажется полезным советом :)
Если память не изменяет, то таким образом показывал заказчику как будут разделяться тысячные доли. А уже здесь забыл исправить :)
Насчет мокапов – как-то я от них отошел пока.
Комментарий недоступен
Одни минусы пошли, сам не ожидал, что туда уйду.
Душеньку вложил в дело, но что-то пошло не так :)
Что-то не так, видимо, делаю.
Комментарий недоступен
Согласен.
Отправил сегодня знакомому журналисту статью на критику.
А Вадим заранее знал что заплатил за какие-то там исследования? Ахахах
Нет, это была моя инициатива.
Как начинающий дизайнер - у вас очень много потенциала, но очень мало практики.
Со временем вы набьете руку и усвоите очень много мелких особенностей, так что дерзайте.
Вставлю пару ложек дегтя:
1. Сетка контента сайта 990px.? Серьезно, в 2019-20 году??? Эта сетка морально устарела, при популярном разрешении 1366 можно сделать контентную область хотя бы 1140 или 1280, при этом можно показать больше товара на странице.
2. Плохая работа с типографикой, переносы, нет выделения главного элемента блока от второстепенного (например, цена очень замылена, а должна сразу быть видна).
3. Ужасный футер. Никто не ищет в подвале кнопку "войти" или "корзина" они там бесполезны, лучше добавить внутренние разделы: Доставка, оплата, акции, отзывы. Их пользователи ищут во вторую очередь.
4. Кнопки на разных экранах - существенно отличаются. При входе в ЛК одна стилистика, кнопка "в корзину" и "оформить" совершенно другие (в том числе шрифт). Так же шрифт в кнопках не выровнен относительно вертикального центра. Лучше придерживаться единого стиля.
5. Не понятно что подразумевает эта галочка http://prntscr.com/qn0y0y, пока на нее не нажмешь и нужна ли она вообще в корзине.
6. Два одинаковых смысловых блока подряд: http://prntscr.com/qn188k Можно разбавить их блоком "Акции" или "Успейте купить". Пользователю не будет понятно зачем так сделано, ведь по их мнению можно было бы табы сделать и на первом блоке.
7. Если большая часть контента выровнена по левому краю, то кнопку так же стоит разместить слева http://prntscr.com/qn19ip. А так она живет своей жизнью.
Однако, на экранах "корзина" и "Оформление" вы как раз сделали правильно и кнопке самое место по центру.
8. В макете показано, что за 2 порции пользователь заплатит 100 руб, хотя на самом деле 200 руб. http://prntscr.com/qn1eqo
Кроме цены за позицию также стоит указать сумму этой позиции, чтобы не вводить пользователей в заблуждение.
Надеюсь, для своего портфолио вы сможете подправить некоторые нюансы макета и сделать его намного лучше.
Спасибо, буду работать над ошибками.