Дизайн Ревью #24 – Юзер Экспириенс (User Experience Design / UX)

July 25, 2019 posted by



и всем привет итак вы смотрите 24 выпуск design review и этот выпуск немножко особенный не только потому что большая часть как бы доминирующая часть этого выпуска будет посвящена adobe experience design яме виду люди которые делали свою работу ним но помимо этого я хочу сделать пару серьезных анонсов и так первый анонс я хочу 25 выпуск разбить на три маленькие части потому что зачастую вы мне присылаете такие вопросы которых мне не хватает мне не хватает пленки на камере чтобы успеть ответить на все ваши вопросы и я решил сделать попробовать один такой именно пилотный выпуск который будет индивидуально посвящен каждому то есть три участника три отдельных видео это первое и второе очень важный момент с этого момента в под каждым из моих design review пишите в комментариях какой бы вы тему хотели обсудить со мной на стриме и я буду делать раз в неделю живую трансляцию которую за которую о которой я буду говорить заранее до в какое оно время будет и сколько она будет длиться и мы с вами сможем обсудить все что угодно касательно работы в сша касательно портфолио касательно каких-то ошибок еще каких то нюансов всего для меня лично это будет очень классно опыт потому что я не могу знать всего на свете на то есть я даю свои советы насколько я осведомлен в плане дизайна но мне кажется именно вот эти стримы будут полезными не только для вас но и для меня тоже то есть я буду чему ты и от вас учиться да вот поэтому это вот такие два глобальных анонса который я хотела сказать ну и теперь время перейти к обзору работ погнали [музыка] это к первую работу прислал олег шептицкий он не написала на украинском языке поэтому я буду немножко медленнее читаю тоже я на ходу перевожу сразу и так привет недавно подписался на твой канал на ютьюбе и в телеграме нравится что ты делишься опытом спасибо у меня уже есть пол полгода опыта в дизайне интерфейсов и веб-сайтов активно ищут сейчас работу поэтому делаю очень много тестовых работ сейчас в тестовых заданий вот одна из них которая мне больше всего нравится он на нее потратил всего лишь два дня вот как пишется значит надеюсь на хорошую критику с твоих стороны так как у тебя больше опыта но большинство того что ты рассказываешь видео я уже знаю хотелось бы больше развиваться в этой сфере собственно блоки олег не вопрос я бы с удовольствием разберу вашу работу мне будет очень приятно во первых сразу же хочу отметить по поводу дизайнов да то есть вы говорите что большинство того что я рассказываю вы уже знаете в этом и вообще су дизайна тут не так много скажем аспектов каких-то до которые но можно рассказывать даты из чаще всего тематика повторяется это какие-то либо стандартные частые ошибки да и и прочее но в общем вашей работе я вижу что она сделана именно с технической точки зрения очень хорошо но я бы хотел рассмотреть некоторые другие детали так что давайте посмотрим итак прекраснейшие серым я вижу вы заранее вот здесь вот значит вдохновлялись здесь у вас ноль накидано библиотека в общем все неплохо за исключением того что иконки все разные стилистике если вы смотрели мои предыдущие видео да я всегда говорил о том что когда вы делаете свои иконки вставьте их в один ряд вы увидите сразу где у вас диспропорции здесь сразу видно что у вас непропорционально да то есть иконки пупа размер разные стилистике ведь у вас разные тут толщины линии идут в этих иконках вот если поставить сразу видно что то толщина не совсем совпадает поэтому вот маленькие такие нюансы всегда за ними нужно следить когда вы делаете свой дизайн и теперь естественно вот перейдем к вашей основной работе даты старта что вот вы сделали и я скажу сразу что здесь во-первых с технической точки зрения у меня вообще к вам никаких претензий вы все сделали прям идеально по правилу 8 у вас везде правильно отступил вас хорошо выстроен layout да то есть я здесь ничего абсолютно не говорю но то что мне не понравилась эта работа с цветами слишком уж странно все выглядит во первых элементы бокового меню то здесь вы сделали голубой да то есть ok вы здесь делали выделение смотреть ведь у вас вот контейнер тут для вот этих элементов и точно также должны были сделать контейнер это первое второе серый цвет всегда означает detail да то есть отключён лучше сделайте белом если вы не хотите чтобы эти объекты так сильно выпирали тогда просто возьмите и дайте прозрачности я не знаю 65 процентов чтобы снизить акцент на не делайте их полностью серыми потому что серый это знак отключи но вот тоже самое здесь вот смотрите я сделал немножко и уже видно что как бы они активны и да она просто на них скажем меньшее внимание падает потом вот эти блоки меня очень волнует я понимаю что видеть падение например там и про шанс или city or или вашего дохода или взлет это очень важные вещи но я не понимаю почему в одном блоке встречается аж целых четыре цвета у вас получается белый зеленый голубой серый почему этот голубой относится он относится вот здесь вот к этим вот графиком или к местоположению немножко непонятно учитывая что у вас вот написано ролик за его сыр links идут а пурпурные зеленые то почему здесь он голубой то есть когда вы делаете какие-то цвета это это конкретный юзер экспириенс вы должны логически продумывать карту то есть как у вас эти цвета скажем ассоциируется с другими элементами в вашем интерфейсе чтобы у человека проскакивал ассоциация поэтому в данном случае например я бы сделал все ну вот именно в данном примере я бы однозначно сделал вот это белое вот другой вариант я сейчас верну объясню вот этот голубой цвет не совсем подходит вот этому синему они взяты из скажем из разных оттенков синего смотрите что я делаю то есть вот сейчас я беру выделяю ваш фон который был другим видео он вас находится в более контрастным синим и теперь я веду сюда и посмотрите разницу между вот этим и вот этим то есть сразу же видно что вот этот цвет больше вписывается в ваш фон который вы выбрали опять-таки ругая за такой серый то есть возьмите и сделайте окей сделать его чуть светлее вот так к примеру даже я сейчас на глаз просто набрасываю но вот в таком виде мне больше нравится чем вот вот этот голубой этот голубом какой-то такой немножко неуверенный то есть вы пытались делать но что-то видимо не не дошли руки до конца именно проработать цвета плюс этот свет он более актуальный более современный то то же самое здесь например если вы все линки использовали голубым блин я даже не знаю в общем здесь слишком много голубого цвета слишком много и я бы постарался немножко переработать потом дальше ну понятное дело что чек чек бокс и то же самое вот этот серый если вы хотели уже ну сделать реально красиво опять-таки смотрите берете просто вот сюда нажимаете да и потом высветлять у вас тогда карта будет одного оттенка вместе с вашим фоном который вы задаете они так что она у вас конкретно серые непонятно почему да то есть тогда вы сможете более лучше расставлять акценты тут естественно уже использовать вот этот вот например синий цвет и все это у вас уже будет более целостная картина я и богу не понимаю почему корзину на корзину столько акцента надо ставить на иконку корзины красным то есть опять-таки белый или серый даже больше бы подошло ну в общем это так мое сугубо мое личное мнение дальше по поводу вот этих чартов тоже они здесь немножко диссонирует вам надо было подобрать другие немного цвета ниже ничего не скажу таблицы сделаны хорошо вот этот цвет практически не читаем запомните если вы работаете с оттенками серого делаете их чит обильными то есть чтобы они нормально читали и уже сейчас тогда выделю здесь вот элементы еще вам покажу смотрите берем ставим в два цвета сюда смотрите сразу как она выделяется намного лучше мне кажется незнающим напишите в комментариях понравилось вам или нет но но мне кажется этот цвет однозначно более такой скажем осовремененный более контрастный и он намного лучше здесь сложиться вот-вот приблизительного так то есть уже мне мне больше нравится так что в принципе по сдаюсь у вас по технической части пятерка то есть все здорово все классно но именно работа с цветами именно с комбинации цветов здесь вам нужно немножко проработать и и потому что некоторые моменты диссонирует опять-таки даже если брать возлагал зачем его делается таким красным акцентировать на нем столько внимания вы хотите чтобы люди вас серийного блокировались с аккаунта нет поэтому не надо на эти вещи и ставит такой большой акцент запомните до в иксе самое главное это именно акцентирование деталей да то есть вы должны именно по иерархии дэна правильно сделать акцент и чтобы человек понимал что у него надо на что ему нужно нажать в первую очередь во вторую в третью пятую 10 тогда в общем олег на самом деле супер классная работа и вы молодец я думаю вы без проблем вообще без проблем найдете себе работу и по подправить и вот именно вот эти нюансы с цветами и будет вас все просто ну вот так так что спасибо что прислали свои работы и так а теперь следующий кандидат девушка ася замятина добрый день евгений спасибо за советы с удовольствием смотрю все видео которые выходят на канале отправляю вам ссылку на свой проект надежды что вы включите его в обзор дождались acer итак для меня этот первый опыт проектирование интерфейсов раньше я работал в основном slaps для своим дизайном было интересно подобрать типографику для онлайн приложения хотелось бы узнать ваше мнение правильно ли я это сделал дополнительная информация макете сразу здесь вот еще это рабочий экран менеджера по продажам со с продуктом продажник cells менеджер который использует его для того чтобы оценить компанию клиента и выбрать какой именно комплект стоит предлагать и кому именно баги так теперь смотрим на интерфейс первое наверное что мне хочется сказать это по поводу сейчас я я не знаю здесь а да вот по поводу типографики вроде бы все и хорошо но здесь например вы очень сильно налепили то есть очень много скажем не хватает воздуха между объектами вот и здесь типы вот и все что у вас вот нотификацию вот такими да вот здесь вот вы сделали 30-30 очень мелкий текст очень мелкие он не должен быть таким мелким старайтесь когда вы делаете не опускайтесь ниже 12 пикселей в размере шрифта то есть если вы опускаетесь уже до десяти и летом до восьми это уже все это ханна то есть но она уже не будет читаться помимо не ниже 12 тут 12 в редких случаях вот типа такого теперь по поводу я не знаю мне здесь хотелось бы по логике пройтись я смотрю на все вот эти например статусы о компании сопровождении у меня разбегаются глаза все как-то очень так знаете как за сказать налеплено до отвести я не понимаю что где и почему например начнем со статусом вроде бы все хорошо здесь вот вроде бы все хорошо но вот за счет вот этих вот чекбоксов не поняла почему они здесь находится лучше бы уже их поставить здесь чтобы они были вот в одну линию тогда у вас будет не будет так гулять вот эти checkbox и потому что если тебе захочется пройтись в атаку не сможете вот так так так надо будет вот потом здесь тоже все как-то очень непонятно при том что я вижу что вы используете срок это один размер шрифта потом дальше дата другой мне кажется здесь вообще было проще сделать все это дело наверное плене даже не знаю но не таблицы и хотя наверно может быть таблицы как вот вы сделали ниже вот насчет таблицы что хочу сказать очень маленькие во-первых checkbox и они должны быть больше потом непонятно почему телефон с мылом так близко придвинуты то есть логично и все вот это вот в свою отодвинуть сюда край и телефон сумел отодвинуть края тогда вы сможете вот-вот константинопольский константин константинович спокойно он уместиться и вам не надо будет его закрывать вот таким макаром поисковый запрос тоже мелкие почему-то шрифт здесь непонятно почему и вы знаете и то то то что я хотел отметить я вот в самом начале когда открыл вашу работу я сразу у меня всё крутилось голове мне хотелось об этом сказать эрла сандре очень сильно сказывается на юзер экспириенс и я понимаю что у вас нету каких-то метаданных до которые вы должны вставлять вам наверное там дали сказали вот здесь вы должно быть вот это вот это вот это и вы там от балды начали писать там галактической империи там зал галактическая империя улице звезды смерти да там комментарии у них есть печеньки это все здорово но на самом деле это плохо всегда старайтесь использовать реальные данные не балуйтесь с этими метаданными во первых вы можете запутать и человека программиста до который будет это смотреть во вторых вы можете но создать неудобную ситуацию на презентации когда менеджер будет презентовать на прием ваших дизайн и старайтесь использовать реальные данные то есть не лучше здесь не выпендриваться вот это первое второе это касательно где же я видел здесь в общем касательно этой таблице вот папа геноцид а есть вы сделали и баги нации загрузить еще как правило делают либо либо да либо инфе не скрывали папагено ца вот есть некоторых случаях бывает я видел там на некоторых сервисах делают что и загрузить еще и pagination но в данном случае мне кажется я не думаю что у компании то есть опять-таки это юзер экспириенс до контактные лица с которыми как конкретно как как их называют если жена и красоту из тех кто будет решать окей мы купим этот продукт или нет как правило это наверное от 3 до 5 человек то есть там например seo сити о там сифон и возможно еще там пару каких-то руководителей все а ну тут у вас не будет по три страницы по 20 человек который будет решать компании покупать не покупать как правил cells менеджер будет иметь контакт с одним максимум с двумя людьми поэтому опять таки здесь нет смысла делать делать вот так вот такую на громоздкую таблицу и вам первую очередь если вы делаете такой продукт вы должны понимать для чего вы делаете и делать его правильно то есть именно с точки зрения юзер экспириенс а вот для меня например если бы я был в окно скажу я вот сейчас человек которого пользователь до который ничего не понимает в этом в этой структуре у меня здесь на самом деле вас возникли бы вопросы то есть 4 организации что значит и реорганизации это значит что у них есть четыре бранча в смысле ну по представительство в разных других городах или как или здесь например вот у них есть адрес и здесь фактический адрес и даже нету ни стрелки ничего и но для чего это почему что будет если я нажму на эти три точки я смогу удалить эту карточку с фактическим адресом или что то есть здесь на первом экране мне не понятно то есть логичнее было бы тогда есть вот адрес где написанного с улицы звезды смерти 2 подписать под фактическим адресом на примере показать спин на карте это было бы нормально то есть я бы понял вот так не не совсем понятно потом здесь это уже такие детали о компании я бы не вдавался точнее я в этом не разбираюсь поэтому разбирать не буду опять здесь например создал сопровождении создал извини изменил и вы ставите просто дату и причем что ну вы просто наверно вот окно на понажимали пробелов поставили дату я наверное я не знаю не скажу что этот правильно это должно было быть сделано совсем иначе я реально сколько это важная информация кто создал кто изменил может быть ее нужно было вынести вверх и видеть кто например последний работал по залу галактическая империя вот в общем здесь наверное пою x у меня больше вопрос сложная штука вот и запомните старайтесь не лепить вот так вот текст друг другу вот напоследок вам скажем не лепите текст друг другу делайте нормальный spacing японки мне нравятся вы хорошие иконки подобрали здесь ничего не скажу но не уменьшаете вот здесь вот например как вы сделали иконки и вот когда уж друг дал мне ни в коем случае вы но такое гигантское расстояние не отодвигайте от текста потому что иначе не будет понятно вот в остальном в принципе хорошая работа я надеюсь главный как-то мои комментарии помогли вот и ася спасибо что прислали свою работу и давайте перейдем к последней и так последняя работа константин серёдке это минута опять хвалебный дизайн я я так назову привет отправляя проект на behance для участия в твоём разборе работ давненько не было новых выпусков надеюсь ближайшее время вновь увидеть вот и добрались и до вас константин как говорится и так вы сделали дизайн магазина я так по магазина обуви и в общем классный дизайн минимализм я честно вам скажу я про тащился от иконок то есть но вот здесь в принципе у вас минималистическая минимализм правильно же скалам минималистической минималистическая эстетика и в общем я без ума нечего сказать вот реально ничего плохого сказать здесь очень странное решение по поводу предкам сделать их просто вот ну справа и мне просто будет интересно когда будет супер длинное название и текст будет практически уже прилегать кнопки бег я не знаю насколько это практично именно поэтому люди стараются как бы не ничего такого знаете не делать cs бред хамство просто пускать его либо нам сверху либо снизу и все они более в одно в принципе решение довольно интересны и так а теперь дальше то что яхта сказать тут мне все нравится очень классно сделано единственный момент который я хотел уточнить вы показали что у вас десять концепция значит как вот вы скроллите мне кажется что полоска слегка маловатая между узковато и будет очень тяжело попасть мышкой на хубер было бы классно если бы эта темная часть немножко бы выезжала вверх так хабар знаете чтобы можно было уже за неуверенно взяться и про скроле 1 за так это чисто моя идея дальше я безума от этих иконок сделаны здорово в принципе очень чисто не уверен на счет вот выезды и сбалансируете пытаясь пытаетесь балансировать между разными стилистика my одного и того же шитая между здесь он у вас такой типа medium даже ближе наверное ну я думаю да медиа здесь вы сделали его уже либо light либо регулярным но в общем не знаю мне кажется здесь надо было как-то чуточку иначе то есть не не добавлять вот это тут видим здесь возможно либо все делать минимум или вовсе регулярно вот но опять не берусь сказать наверняка сел мне нравится мне нравится что цены выпячивают хорошо то есть проблем никаких здесь нету footer тоже чистый приятный актуальные иконки о чем я не раз говорю вот эта страница тоже хорошая не знаю захвалил ясно и точно точно захвалил я видел константин это ваша единственная работа и ну мне реально нереально по ней ничего сказать просто вот от души красота люблю когда у меня получаются вот такие короткие обзоры где не ничего плохого сказать я имею ввиду в принципе цель моего канала наоборот говорится находить какие-то ошибки но здесь у нас минимальный я думаю что они больше касается такого типа скажем логические части построения layout и и самого контента поэтому ещё раз хочу сказать спасибо вам огромное спасибо что смотрите design review напомню кто досмотрел до конца пожалуйста напишите тему на следующую неделю чтобы вы хотели чтобы я обсудил и я обязательно сделаю анонс насчет стрима и мы с вами дружно пообщаемся на канале скажем будет будет 1 для нас опыт вот я хочу вывести это на постоянную основу чтобы мы смогли с вами общаться делиться опытом друг с другом я думал это будет многим полезна вот оно естественно я не могу напомнить про google chrom mini подписывайтесь на канал и кто-то из вас станет счастливчиком и обладателем этой интересные штуки так что вот вот и все вот план ребята увидимся с вами уже в следующих выпусках так что пока [музыка]

9 Comments

9 Replies to “Дизайн Ревью #24 – Юзер Экспириенс (User Experience Design / UX)”

  1. Design Review says:

    Не забывайте вступать в нашу уютную группу в Телеграмм https://t.me/designreview99

  2. Ольга Сахань says:

    Спасибо большое за Ваш труд! Очень интересно, информативно, позитивно. Мне были бы интересны ссылочки на полезные для дизайнеров ресурсы, типо dribbble, behance, angellist..

  3. Пабло Эскобар says:

    Спасибо тебе на твои видео <3

  4. • Sam • says:

    + работа в сша

  5. Ася Замятина says:

    Раз уж зашел разговор о UX в следующих выпусках, расскажите пожалуйста как вы работаете с логикой приложения, каков процесс работы, какие инструменты используете, сколько итераций делаете. Как вы расставляете приоритеты и акценты в приложении, если оно сложное и процессы запутанные, как вы этот узел распутываете? Раньше я работала только с дизайном сайтов и не сталкивалась с очень уж сложной логикой. Я видела что вы работали над сложными приложениям, когда вы делали обзоры на свои работы. (например BAU5 Workout ) Расскажите на примере, как вы принимали решения какие из данных и в каком порядке выводить на экран.

  6. Ася Замятина says:

    Ура, вышел обзор с моим интерфейсом! Очень ценные замечания, обязательно их учту. Я знаю правила которые вы проговорили, но все равно глаз замыливается, и перестаешь видеть недостатки.
    Как я рада что есть возможность показать свою работу профессионалу, ничего нет лучше конструктивной критики для развития.
    Спасибо большое за ваше время, теперь я никогда не повторю тех же ошибок касательно спейсинга, чекбоксов, типографики. Буду использовать реальные мета-данные.

    Касательно UX-логики я учту ваши замечания, но почти все на что указали — оправдано. Для менеджеров которые работают с этим экраном все аббревиатуры и данные интуитивно понятны, я это проверяла. Таковы особенности работы именно этой организации. Контактных лиц больше 3-5, это не только руководство, это целые отделы, поэтому их много. А вот блок «сопровождение» я переделаю, спасибо еще раз.

    P.S. Я согласна, UX — это сложная штука. Очень бы хотелось что бы вы покритиковали эту часть имея полную информацию о задачах которые он должен решать. Но бизнес-процессы компании это коммерческая тайна и всех особенностей техзадания я рассказать не могу(((

  7. Michael says:

    Спасибо за видео) Хотелось бы стрим о работе дизайнером в штатах. Где вы работали/работаете? Что нравится/не нравится? Может советы какие-нибудь по теме. Думаю многим будет интересно)

  8. Konstantin Seredkin says:

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

  9. IVAN LIFE says:

    Как всегда, интересно, полезно и информативно – Благодарю !

Leave a Comment

Your email address will not be published. Required fields are marked *