Никто ни у кого не копировал, все идеи поверхностные. Весь тон задали исходники, которые предоставили, прототип и ТЗ, в котором было описано что куда ставить (я так надеюсь, что там хоть что-то дельное было).
У вас подача больше похожа на лендинг с простой сеткой, простыми блоками, без изысков и работой с типографикой. Как первый черновой вариант - неплохо, но нужно очень много деталей дорабатывать.
Хорошо, что придерживаетесь сетки, есть понимание основ типографики, но не хватает дерзости в компоновке.
У другого варианта была попытка обыграть более сложной компоновкой, но она провалилась, т.к. первый экран получился информативным (скорее всего помогли ваши рекомендации), но не концентрирующем на себе внимание. Так же элементы на всем макете живут отдельной жизнью от сетки.
Оба варианты сырые и нуждаются в переработке.
Не бойтесь креативить, делайте нестандартные вещи и удачи в будущих проектах.
Вы сами ответили на свой вопрос. Представляетесь UX-редактором, вместо дизайнера или проектировщика интерфейсов.
Вы уже заплатили деньги не понимая чему вас будут обучать и кем вы будете работать. На курсе до сих пор не объяснили разницу в профессиях, а вам даже не интересно было поискать в гугле.
Но даже при всем при этом удачи вам в обучении. Главное не останавливайтесь, работайте над собой и все получится.
Хорошо подмечено!
Тут следует смотреть еще на то, что при меньшей ширине экрана для поиска недостаточно места, поэтому он сворачивается в кнопку чтобы не наезжать на меню.
Поиск выделен ярким цветом, который быстро привлекает внимание как на большом мониторе, так и на экране ноутбука, соответственно его быстро можно найти.
Так же замечу, что в статье приведены не обязательные правила, а перечень рекомендаций на основе исследований и опыта.
Хорошая подборка!
От себя добавлю: https://www.uplabs.com/
Очень годный сервис не только для вдохновения.
Статья годная, но позвольте не согласиться по некоторым пунктам.
Разбивка оформления заказа на несколько шагов:
Это становиться не актуально. Пользователей, которые не заканчивают оформление все больше и больше. Пользователи хотят оформить заказ быстрее не тратя свое время.
Идеальным вариантом будет размещение всей информации на одной странице, т.к. при таком отображении пользователю не нужно прыгать из шага в шаг и вспоминать что он указывал на прошлых шагах. Да и сам формат вертикального считывания информации уже пророс во все сферы веба.
Так же хочу отметить, что сейчас все больше людей оформляют товары со смартфонов и поэтому не стоит перегружать корзину, если планируется адаптивный сайт. Если на смартфоне перегрузить страницу оформления или корзину - они уйдут к конкурентам, т.к. не захотят разбираться что к чему (это касается и пошагового оформления заказа).
Согласен, на первый взгляд сайты с горизонтальными фильтрами и не припомнишь, но дело не в том, что их мало, а в том, что они реализуются в основном на специализированных магазинах, где нет большого количества фильтров.
Если у вас есть определенные сомнения насчет горизонтального расположения, то возьмите на вооружение этот пример реализации: www.stoolgroup.ru
Таким образом вы покажете больше товаров на странице, все фильтры доступны по одному нажатию и не отвлекают от процесса покупки. Плюс такое решение хорошо адаптируется для мобильных устройств.
Добавлю несколько замечаний:
1. "Треть покупателей не завершает заказ, потому что не помнит пароль".
Пользователь не будет помнить пароль только на тех сайтах, на которых происходит разовая покупка, например интернет-магазин штор, т.к. купив один раз ему не скоро понадобится повторная покупка. Вряд ли вы забыли пароль от "Ситилинка" или личного кабинета банкинга.
2. "При оформлении в несколько шагов прогресс-бар позволит пользователю «контролировать» процесс и не волноваться"
По данным RetailRocket оформление в несколько шагов неэффективно и приводит к тому, что 40% пользователей не завершают оформление. Этому способствует несколько причин:
1. Пользователи забывают что вводили на предыдущем шаге.
2. Пользователь хочет посмотреть только стоимость доставки до его города и не хочет заполнять поля
3. Подсознательное убеждение, что на многостраничном оформлении нужно будет заполнять большое количество полей.
Поэтому оформление заказа нужно делать линейно, т.е. на одной странице.
3. "Каждое новое поле — новое страдание и новые сомнения для пользователя. Удалите все, что можете. Форма может оттолкнуть уже самим размером."
Это не совсем так. Конечно, лучше привести минимальное количество полей, но как показывает практика - пользователи охотно заполняют множество полей, если это увеличение ведет к упрощению информации. Например, адрес доставки можно вписать одной строкой или поделить на улицу, дом, квартиру и даже подъезд и этаж. И поделённый вариант пользователи заполнят охотнее, т.к. им так самим проще расписать.
Поэтому тут все таки стоит исходить из контекста этих полей.
Ну и это, конечно, это неправильный пример, но все таки. Амазон - интернет-магазин, в котором при оформлении нужно заполнить более 20 полей, обязательная регистрация при оформлении заказа и само оформление поделено на несколько этапов. Он собрал весь негатив, который описан в любой статье (не только в этой) и это не мешает ему быть самым крупным интернет-магазином мира.
Вы явно не знаете как выглядит интерактивный прототип.
Интерактив подразумевает взаимодействие с конечным продуктом, у вас же кроме кнопок и переходов на следующую страницу ничего не показано, а это дополнительные трудозатраты на этапе согласования прототипа и разработки. Клиенту не понятно, что будет, если он нажмет на значок "Профиль" или "Чаты" в первом экране вашего прототипа на фигме, разработчик не в курсе как будет выглядеть вкладка "Люди" в том же первом экране. Это все требует дополнительных пояснений, созвонов.
В интерактивном прототипе нужно показывать не только переход по кнопкам, но и ховеры этих кнопок, как работает слайдер и свайп на мобилках, импуты, множественные буллиты, табы, вкладки и многое другое.
Да, второй прототип закрывает часть вопросов, но там уже есть дизайн, а его переделка в случае небольших правок - это еще большие трудозатраты, чем просто правки в прототипе.
Да, прототип не показывает полный конечный продукт, но подразумевает его в схематическом виде без всякого дизайна, чтобы любой человек смог пройти пользовательский путь. Ваш прототип не закрывает этот пункт.
В марвеле так же осталось куча вопросов, касающихся элементарных вещей: например, зачем мне 3 раза создавать чат? В прототипе ясно указано, что нажать на кнопку "создать чат" нужно 3 раза. При первом нажатии все понятно, но зачем дублировать эту же надпись во второй и третий раз, если чат я уже создал, только из-за названия чата?
Или что произойдет, когда я нажму на кнопку "Бесплатный чат" при его создании?
Или насколько раскрывается детальная информация в профиле людей (сколько символов можно ввести, сколько строчек это занимает, не перекроет ли эта информация первый экран)?
Как добавляется комментарий в профиле?
И это только первая часть вопросов.
В общем вам нужно немного расширить видение дизайнеров и проектировщиков для дальнейшей работы, плюс не отказываться от такого "говна мамонта" как Axure, т.к. на нем за пару часов можно сделать прототип интернет-магазина, а приложения тем более.
Получилось симпатично, приятные цвета, , но много функционала было упущено в угоду "красивости". Надеюсь, что это просто MVP и все улучшения будут в следующих релизах.
Не буду повторять то, что уже было сказано, просто сделаю пометки:
1. Выбор даты занимает очень много места, можно обойтись выпадающим списком на ближайшую неделю или сделать иконку календаря (Да, это лишний клик, но это того стоит). ИМХО.
2. Куда пропала информация с дисклеймера при оплате? Допустим я захотел сходить с племянником (16-17 лет) на фильм с категорией +18 (например, на Джокера). Быстренько купил билет на фильм, даже не вдаваясь в возрастной рейтинг. Только придя в кинотеатр я пойму, что его не пропустят, а предупредить меня не удосужились. Это будет сказываться на негативных отзывах о кинотеатре.
3. В билете пропал номер зала, в котором показывают фильм.
Как пользователю узнать в каком из 7 или 9 залов идет его фильм, спрашивать у администраторов? Это плохой пользовательский опыт.
4. Куда делся раздел по акциям? Если это иконка в середине, то она вообще не ассоциируется с ними, лучше поставить проценты.
5. Где я могу выбрать комфортность кресла? В старом дизайне было хотя бы цветовое указание, а в новом отсутствует. Это вроде и мелочь, но очень значительная для тех, кто любит смотреть фильмы в повышенном комфорте.
6. Как пользователю отсортировать фильмы по формату, например "3D"?
7. Если есть несколько статусов у билета, то стоит добавить кнопку отмены покупки. В старой версии она присутствует и это действительно удобно.
Ну и поиск лучше все таки добавить.
Это очень хорошо, что вы спрашиваете мнение именно у ЦА, т.к. она и будет в первую очередь пользоваться продуктом и и приносить прибыль компании.
Надеюсь следующий релиз придется по вкусу любому пользователю.
Статья интересная.
Еще было бы интересно узнать как создавал приложение, какой был пошаговый план действий.
Все ли делал самостоятельно или привлекал кого-то со стороны?
Вполне достоин упоминия "Inter" разработанный дизайнером из Figma.
Полностью бесплатный, с поддержкой кириллицы.
https://rsms.me/inter/
Mikhail Dubovoi
Ну зачем переводить бред? Многие вещи вырваны из контекста, многие подходят только для одной определенной цели, а не дизайна в целом, что-то вообще подходит ТОЛЬКО для англоязычной аудитории.
Пример с цветом текста и прозрачность разработан не для того, чтобы глаза не уставали, а для быстрой замены цвета на другой с сохранением контрастности, читаемости и без ручного подбора. Гугл 100 раз об этом говорил, но все равно находятся люди, которые воспринимают мателиал как иконостас без возможности шага влево и вправо.
Количество символов в строке напрямую зависит от размера шрифта.Тем более, что диапазон 45-60 символов - это для английского языка http://prntscr.com/j6sxfj