Mikhail Dubovoi
Ребята молодцы!
Столько хейта вокруг статьи собрали, снимаю шляпу.
Ну-ну
К сожалению, у писем нет адаптива. Они имеют резиновую верстку. Это разные вещи. Поэтому письма нужно верстать с учетом этой особенности, а не сразу на мобилке. Особенно это касается шапки и подвала, т.к. дизайнеру или верстальщику будет тяжело перестроить с маленького экрана на десктоп табличное представление.
Когда берете чужие работы все таки указывайте автора, ато как-то не хорошо получается.
https://dribbble.com/shots/9393020-Mi-Remote-Control-Mobile-app
https://dribbble.com/shots/9179889-Neuomorph-Ui-Kit
Согласен, на первый взгляд сайты с горизонтальными фильтрами и не припомнишь, но дело не в том, что их мало, а в том, что они реализуются в основном на специализированных магазинах, где нет большого количества фильтров.
Если у вас есть определенные сомнения насчет горизонтального расположения, то возьмите на вооружение этот пример реализации: www.stoolgroup.ru
Таким образом вы покажете больше товаров на странице, все фильтры доступны по одному нажатию и не отвлекают от процесса покупки. Плюс такое решение хорошо адаптируется для мобильных устройств.
Хорошо подмечено!
Тут следует смотреть еще на то, что при меньшей ширине экрана для поиска недостаточно места, поэтому он сворачивается в кнопку чтобы не наезжать на меню.
Поиск выделен ярким цветом, который быстро привлекает внимание как на большом мониторе, так и на экране ноутбука, соответственно его быстро можно найти.
Так же замечу, что в статье приведены не обязательные правила, а перечень рекомендаций на основе исследований и опыта.
Добавлю несколько замечаний:
1. "Треть покупателей не завершает заказ, потому что не помнит пароль".
Пользователь не будет помнить пароль только на тех сайтах, на которых происходит разовая покупка, например интернет-магазин штор, т.к. купив один раз ему не скоро понадобится повторная покупка. Вряд ли вы забыли пароль от "Ситилинка" или личного кабинета банкинга.
2. "При оформлении в несколько шагов прогресс-бар позволит пользователю «контролировать» процесс и не волноваться"
По данным RetailRocket оформление в несколько шагов неэффективно и приводит к тому, что 40% пользователей не завершают оформление. Этому способствует несколько причин:
1. Пользователи забывают что вводили на предыдущем шаге.
2. Пользователь хочет посмотреть только стоимость доставки до его города и не хочет заполнять поля
3. Подсознательное убеждение, что на многостраничном оформлении нужно будет заполнять большое количество полей.
Поэтому оформление заказа нужно делать линейно, т.е. на одной странице.
3. "Каждое новое поле — новое страдание и новые сомнения для пользователя. Удалите все, что можете. Форма может оттолкнуть уже самим размером."
Это не совсем так. Конечно, лучше привести минимальное количество полей, но как показывает практика - пользователи охотно заполняют множество полей, если это увеличение ведет к упрощению информации. Например, адрес доставки можно вписать одной строкой или поделить на улицу, дом, квартиру и даже подъезд и этаж. И поделённый вариант пользователи заполнят охотнее, т.к. им так самим проще расписать.
Поэтому тут все таки стоит исходить из контекста этих полей.
Ну и это, конечно, это неправильный пример, но все таки. Амазон - интернет-магазин, в котором при оформлении нужно заполнить более 20 полей, обязательная регистрация при оформлении заказа и само оформление поделено на несколько этапов. Он собрал весь негатив, который описан в любой статье (не только в этой) и это не мешает ему быть самым крупным интернет-магазином мира.
Спасибо за развернутый ответ!
Если не секрет, сколько примерно часов затратили на разработку такой система? Т.к. проделана колоссальная работа, то видимо разработка велась несколькими дизайнерами и программистами.
Клевая статья, очень хорошо все разложено!
У меня 2 вопроса:
1. Насколько рационально отрисовывать 7 макетов под разные разрешения и как к такому разнообразию относятся заказчики ? На большинстве проектов 4 вполне хватает: один для мобильных, второй для планшетов, и 2 для десктопа.
2. Как я понимаю прототипы так же делаете в Figma. Насколько сложнее разрабатывать интерактивные прототипы по сравнению с Axure? В Axure же можно заказчику приближенно показать как будет работать готовый сайт (вкладки и табы, наведение на элементы, счетчики, а если добавлять функции, то и добавление в корзину с изменением количества и цены).
Никто ни у кого не копировал, все идеи поверхностные. Весь тон задали исходники, которые предоставили, прототип и ТЗ, в котором было описано что куда ставить (я так надеюсь, что там хоть что-то дельное было).
У вас подача больше похожа на лендинг с простой сеткой, простыми блоками, без изысков и работой с типографикой. Как первый черновой вариант - неплохо, но нужно очень много деталей дорабатывать.
Хорошо, что придерживаетесь сетки, есть понимание основ типографики, но не хватает дерзости в компоновке.
У другого варианта была попытка обыграть более сложной компоновкой, но она провалилась, т.к. первый экран получился информативным (скорее всего помогли ваши рекомендации), но не концентрирующем на себе внимание. Так же элементы на всем макете живут отдельной жизнью от сетки.
Оба варианты сырые и нуждаются в переработке.
Не бойтесь креативить, делайте нестандартные вещи и удачи в будущих проектах.
Как начинающий дизайнер - у вас очень много потенциала, но очень мало практики.
Со временем вы набьете руку и усвоите очень много мелких особенностей, так что дерзайте.
Вставлю пару ложек дегтя:
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
Кроме цены за позицию также стоит указать сумму этой позиции, чтобы не вводить пользователей в заблуждение.
Надеюсь, для своего портфолио вы сможете подправить некоторые нюансы макета и сделать его намного лучше.
Вы явно не знаете как выглядит интерактивный прототип.
Интерактив подразумевает взаимодействие с конечным продуктом, у вас же кроме кнопок и переходов на следующую страницу ничего не показано, а это дополнительные трудозатраты на этапе согласования прототипа и разработки. Клиенту не понятно, что будет, если он нажмет на значок "Профиль" или "Чаты" в первом экране вашего прототипа на фигме, разработчик не в курсе как будет выглядеть вкладка "Люди" в том же первом экране. Это все требует дополнительных пояснений, созвонов.
В интерактивном прототипе нужно показывать не только переход по кнопкам, но и ховеры этих кнопок, как работает слайдер и свайп на мобилках, импуты, множественные буллиты, табы, вкладки и многое другое.
Да, второй прототип закрывает часть вопросов, но там уже есть дизайн, а его переделка в случае небольших правок - это еще большие трудозатраты, чем просто правки в прототипе.
Да, прототип не показывает полный конечный продукт, но подразумевает его в схематическом виде без всякого дизайна, чтобы любой человек смог пройти пользовательский путь. Ваш прототип не закрывает этот пункт.
В марвеле так же осталось куча вопросов, касающихся элементарных вещей: например, зачем мне 3 раза создавать чат? В прототипе ясно указано, что нажать на кнопку "создать чат" нужно 3 раза. При первом нажатии все понятно, но зачем дублировать эту же надпись во второй и третий раз, если чат я уже создал, только из-за названия чата?
Или что произойдет, когда я нажму на кнопку "Бесплатный чат" при его создании?
Или насколько раскрывается детальная информация в профиле людей (сколько символов можно ввести, сколько строчек это занимает, не перекроет ли эта информация первый экран)?
Как добавляется комментарий в профиле?
И это только первая часть вопросов.
В общем вам нужно немного расширить видение дизайнеров и проектировщиков для дальнейшей работы, плюс не отказываться от такого "говна мамонта" как Axure, т.к. на нем за пару часов можно сделать прототип интернет-магазина, а приложения тем более.
Годно!
Можно еще иконку избранного добавить в верхний правый угол.
Так же, если кнопка "В корзину" по умолчанию активна, то желательно отобразить выбранный размер.
Хорошая подборка!
От себя добавлю: https://www.uplabs.com/
Очень годный сервис не только для вдохновения.
Получилось симпатично, приятные цвета, , но много функционала было упущено в угоду "красивости". Надеюсь, что это просто MVP и все улучшения будут в следующих релизах.
Не буду повторять то, что уже было сказано, просто сделаю пометки:
1. Выбор даты занимает очень много места, можно обойтись выпадающим списком на ближайшую неделю или сделать иконку календаря (Да, это лишний клик, но это того стоит). ИМХО.
2. Куда пропала информация с дисклеймера при оплате? Допустим я захотел сходить с племянником (16-17 лет) на фильм с категорией +18 (например, на Джокера). Быстренько купил билет на фильм, даже не вдаваясь в возрастной рейтинг. Только придя в кинотеатр я пойму, что его не пропустят, а предупредить меня не удосужились. Это будет сказываться на негативных отзывах о кинотеатре.
3. В билете пропал номер зала, в котором показывают фильм.
Как пользователю узнать в каком из 7 или 9 залов идет его фильм, спрашивать у администраторов? Это плохой пользовательский опыт.
4. Куда делся раздел по акциям? Если это иконка в середине, то она вообще не ассоциируется с ними, лучше поставить проценты.
5. Где я могу выбрать комфортность кресла? В старом дизайне было хотя бы цветовое указание, а в новом отсутствует. Это вроде и мелочь, но очень значительная для тех, кто любит смотреть фильмы в повышенном комфорте.
6. Как пользователю отсортировать фильмы по формату, например "3D"?
7. Если есть несколько статусов у билета, то стоит добавить кнопку отмены покупки. В старой версии она присутствует и это действительно удобно.
Ну и поиск лучше все таки добавить.
Это очень хорошо, что вы спрашиваете мнение именно у ЦА, т.к. она и будет в первую очередь пользоваться продуктом и и приносить прибыль компании.
Надеюсь следующий релиз придется по вкусу любому пользователю.
Статья интересная.
Еще было бы интересно узнать как создавал приложение, какой был пошаговый план действий.
Все ли делал самостоятельно или привлекал кого-то со стороны?
А правда, что за океаном не очень поощряют работать из дома?
И собственно, чем это обусловлено?
Просто сейчас в России просто БУМ фриланса,как это не сумбурно.
Хорошая статья!
Скажите, у вас в основном сотрудники в офисе или больше удаленных исполнителей?
Статья годная, но позвольте не согласиться по некоторым пунктам.
Разбивка оформления заказа на несколько шагов:
Это становиться не актуально. Пользователей, которые не заканчивают оформление все больше и больше. Пользователи хотят оформить заказ быстрее не тратя свое время.
Идеальным вариантом будет размещение всей информации на одной странице, т.к. при таком отображении пользователю не нужно прыгать из шага в шаг и вспоминать что он указывал на прошлых шагах. Да и сам формат вертикального считывания информации уже пророс во все сферы веба.
Так же хочу отметить, что сейчас все больше людей оформляют товары со смартфонов и поэтому не стоит перегружать корзину, если планируется адаптивный сайт. Если на смартфоне перегрузить страницу оформления или корзину - они уйдут к конкурентам, т.к. не захотят разбираться что к чему (это касается и пошагового оформления заказа).
Вполне достоин упоминия "Inter" разработанный дизайнером из Figma.
Полностью бесплатный, с поддержкой кириллицы.
https://rsms.me/inter/
Согласен с вами, но частично.
Просто зачастую бывают случаи в ИМ, когда семантику подготовить не так сложно, однако собственник еще не определился с множеством факторов, например, не знает какая будет выгрузка товаров (а под готовые разделы делать выгрузку из 1С прибавит дополнительных расходов и немаленьких. Даже был случай, когда в прототипе заложили одно название (максимум 3 строки), а уже после этапа дизайна приходит выгрузка и получается, что название не только в 3 строки, а еще и дублируется на английском. Это приводит к еще большим трудозатратам.) или не определился будет ли доставка в другие регионы и ее стоимостью (а разделы уже проработаны и в случае отказа они либо отложатся в долгий ящик, либо будут излишне израсходованные средства).
По поводу продвижения тоже спорный вопрос.
Допустим есть компания, которая решила запустить свою линию одежды в онлайн. Товарных позиций не так много 50-70, с размерным рядом и цветом получаем где-то 300-400 торговых предложений. Семантику для них сделать очень просто - это несколько разных разделов и только (это можно сделать после этапа верстки и программирования), а вот продвижение? Просто добавив SEO теги с SEO фильтрами мы расширим товарные предложения до 1,5-2 тысяч. Причем эту компанию с ее мизерной товарной матрицей удалось вывести в топы (да, не на первую позицию, но в пятерке.) Так что начальное продвижение только по семантике - это ОЧЕНЬ спорный вопрос. Да, это один из примеров, но это подавляющее большинство сайтов с среднем и низшем сегменте.
Тут наверное имелось ввиду к ЛПРам.
Например, если прототип утверждают несколько лиц: владелец бизнеса и несколько начальников.
Владелец будет смотреть на то, решает ли прототип задачи бизнеса. Маркетолог будет оценивать какой конверсии удастся добиться. Отдел продаж - как быстро и удобно найти нужный товар для дальнейшей коммуникации с клиентами.
В целом все по делу, кратко и в точку. Есть один только вопрос:
Зачем делать семантическое проектирование именно на этапе проектирования?
Попробую объяснить.
Семантику лучше все таки доверить SEO-специалисту. Если прототип разрабатывается в студии - то, скорее всего, у них есть сеошник в штате или на подряде и вопросов не возникает. Если же прототип заказывается фрилансеру - то скорее всего он этот этап не предусмотрит или накосячит с семантикой, т.к. он проектировщик, а не SEO-специалист.
Так же сайт все таки не будет готов к продвижению, т.к это только небольшая часть работы, которую будет делать SEO-специалист.
Таким образом получается, что обращать внимание на присутствие семантического проектирования нужно только если заказывали прототип в студии.
Насчет "Mobile first" немного не верно, но по-сути новичкам так будет понятнее.
MobileFirst по определению идеально подходит тем сайтам, которые изначально (в первую очередь) рассчитаны именно на мобильные устройства, например какой-нибудь "музыкальный сервис онлайн, с возможностью прослушивать MP3'шки в качестве 32-64Кбит, специально для тех у кого кончился трафик и интернет работает с ограничениями скорости", а десктоп просто чтобы был и закрывал вопросы остальной группы пользователей, при этом оставался с тем же функционалом.
В целом все верно.
Еще такой вопрос: еще не пробовали по API Figma объединить дизайн и разработку?
Вячеслав, да, это понятно. Спасибо за видео.
Возможно нужно еще пару раз попробовать.
Спасибо!
Как раз выше прокомментировал.
Спасибо!
Под интерактивом я имел ввиду самое банальное понятие: раскрытие характера и степени взаимодействия между объектами.
Сложные взаимодействия по типу: раскрывающийся список, ховеры кнопок, буллиты, анимация слайдера и тд. сделать, конечно, можно, но приходилось плодить кучу бесполезных элементов, которые не нужны были при дальнейшей разработке и засоряли файлы проекта, да и трудозатратно.
Поэтому возник вопрос, возможно у вас использовались какие-то наработки.
Хотелось бы услышать как вы делаете интерактивные прототипы?
В Figma весьма скудный набор для презентации прототипа (особенно, если речь идет не о приложении, а о десктоп версии). Пока вместо плясок с бубном остановился на старом добром Axure.
Вы сами ответили на свой вопрос. Представляетесь UX-редактором, вместо дизайнера или проектировщика интерфейсов.
Вы уже заплатили деньги не понимая чему вас будут обучать и кем вы будете работать. На курсе до сих пор не объяснили разницу в профессиях, а вам даже не интересно было поискать в гугле.
Но даже при всем при этом удачи вам в обучении. Главное не останавливайтесь, работайте над собой и все получится.