1. Can’t Unsee
Если вы неравнодушны к деталям, Can’t Unsee станет вашим любимым способом убить время. Вам нужно выбирать между двумя интерфейсами, которые выглядят очень похожими, но с небольшими (а иногда и значительными) различиями. Сможете ли вы найти идеальный до пикселя дизайн?
Играйте в Can’t Unsee: https://cantunsee.space/
2. Color
Color сводится к тому, насколько точно ваши глаза распознают цвета. Вы будете играть с оттенками, насыщенностью, дополнительными цветами, аналоговыми, а также с триадными и тетрадными цветовыми схемами. Довольно расслабляющая игра!
Играйте в Color: https://color.method.ac/
3. Designercize
Designercize был моим лучшим другом в колледже. Это генератор случайных чисел для безумных дизайн челленджей, которые могут улучшить ваше творческое мышление. Вы можете выбрать уровень сложности между легким, средним и сложным, и сколько времени вы должны сосредоточиться на процессе. Я знаю, что некоторые компании используют Designercize во время собеседований, так что она может пригодиться, если вы ищете новую работу!
Играйте в Designercize: https://designercize.com/
4. Figma Ninja
Figma Ninja поможет вам познакомиться с самой Figma и ее сочетаниями клавиш с помощью увлекательной игры, основанной на скорости и точности. Если вы новичок в этой программе и хотите улучшить навыки работы с Figma эта игра для вас.
Играйте в Figma Ninja: https://www.figma.com/community/file/769694576496801916
5. Flexbox Froggy
Несколько друзей фронтенд-разработчиков предложили мне поиграть в Flexbox Froggy, когда я попросил что-нибудь быстрое и удобное, чтобы освежить знания по CSS. В этой игре есть 24 различных уровня, на которых вы можете проверить свои навыки CSS. Кроме того, она может напомнить вам игру Frogger (в которую я любил играть в детстве).
Play Flexbox Froggy: https://flexboxfroggy.com/
6. Hex Invaders
Ваши друзья думают, что это странно, что вы знаете шестнадцатеричные цветовые коды наизусть? Что ж, теперь вы можете показать им, почему вам просто играть в Hex Invaders! Ваша уникальная цель – уничтожить армию инопланетян, которые пришли завоевать нашу планету... ударив по ним цветными ракетами. Новый взгляд на классику видеоигр.
Играйте в Hex Invaders: http://www.hexinvaders.com/
7. It’s Centred That
Простая игра, которая сводится к тому, насколько ваши глаза натренированы. Вы должны замечать нецентрированные элементы. Вам нужно будет решить, центрирована ли точка в различных представленных формах. Иногда все зависит от пикселей, так что… будьте готовы проиграть!
Играйте в It’s Centred That: https://www.supremo.co.uk/designers-eye/?playagain
8. Kern Type
Kern Type – расслабляющая игра с медленным темпом. Перемещайте буквы, чтобы добиться идеального межбуквенного интервала и набрать больше очков. Никаких таймеров!
Играйте в Kern Type: https://type.method.ac/
9. Pixactly
Сколько раз вы рисовали прямоугольник нужного вам размера от руки и считали, что он получился идеально? Теперь вы можете проверить это своеобразное умение, играя в Pixactly. Вам нужно нарисовать прямоугольник, который соответствует указанным размерам, и получить оценку в зависимости от того, насколько вы близки к заданным требованиям. Чем ниже оценка, тем лучше вы справились. Звучит легко, но это определенно не так, особенно после некоторых первых уровней.
Играйте в Pixactly: https://www.pixact.ly/
10. Shape Type
Когда я был молодым и свободным графическим дизайнером, я испытывал сложности с рисованием фигур карандашом. Shape Type позволяет показать, как работают векторные фигуры забавным и доступным способом. Если вы новичок в этой сфере, я настоятельно рекомендую вам попробовать эту игру!
Играйте в Shape Type: https://shape.method.ac/
Если вы неравнодушны к деталям, Can’t Unsee станет вашим любимым способом убить время. Вам нужно выбирать между двумя интерфейсами, которые выглядят очень похожими, но с небольшими (а иногда и значительными) различиями. Сможете ли вы найти идеальный до пикселя дизайн?
Играйте в Can’t Unsee: https://cantunsee.space/
2. Color
Color сводится к тому, насколько точно ваши глаза распознают цвета. Вы будете играть с оттенками, насыщенностью, дополнительными цветами, аналоговыми, а также с триадными и тетрадными цветовыми схемами. Довольно расслабляющая игра!
Играйте в Color: https://color.method.ac/
3. Designercize
Designercize был моим лучшим другом в колледже. Это генератор случайных чисел для безумных дизайн челленджей, которые могут улучшить ваше творческое мышление. Вы можете выбрать уровень сложности между легким, средним и сложным, и сколько времени вы должны сосредоточиться на процессе. Я знаю, что некоторые компании используют Designercize во время собеседований, так что она может пригодиться, если вы ищете новую работу!
Играйте в Designercize: https://designercize.com/
4. Figma Ninja
Figma Ninja поможет вам познакомиться с самой Figma и ее сочетаниями клавиш с помощью увлекательной игры, основанной на скорости и точности. Если вы новичок в этой программе и хотите улучшить навыки работы с Figma эта игра для вас.
Играйте в Figma Ninja: https://www.figma.com/community/file/769694576496801916
5. Flexbox Froggy
Несколько друзей фронтенд-разработчиков предложили мне поиграть в Flexbox Froggy, когда я попросил что-нибудь быстрое и удобное, чтобы освежить знания по CSS. В этой игре есть 24 различных уровня, на которых вы можете проверить свои навыки CSS. Кроме того, она может напомнить вам игру Frogger (в которую я любил играть в детстве).
Play Flexbox Froggy: https://flexboxfroggy.com/
6. Hex Invaders
Ваши друзья думают, что это странно, что вы знаете шестнадцатеричные цветовые коды наизусть? Что ж, теперь вы можете показать им, почему вам просто играть в Hex Invaders! Ваша уникальная цель – уничтожить армию инопланетян, которые пришли завоевать нашу планету... ударив по ним цветными ракетами. Новый взгляд на классику видеоигр.
Играйте в Hex Invaders: http://www.hexinvaders.com/
7. It’s Centred That
Простая игра, которая сводится к тому, насколько ваши глаза натренированы. Вы должны замечать нецентрированные элементы. Вам нужно будет решить, центрирована ли точка в различных представленных формах. Иногда все зависит от пикселей, так что… будьте готовы проиграть!
Играйте в It’s Centred That: https://www.supremo.co.uk/designers-eye/?playagain
8. Kern Type
Kern Type – расслабляющая игра с медленным темпом. Перемещайте буквы, чтобы добиться идеального межбуквенного интервала и набрать больше очков. Никаких таймеров!
Играйте в Kern Type: https://type.method.ac/
9. Pixactly
Сколько раз вы рисовали прямоугольник нужного вам размера от руки и считали, что он получился идеально? Теперь вы можете проверить это своеобразное умение, играя в Pixactly. Вам нужно нарисовать прямоугольник, который соответствует указанным размерам, и получить оценку в зависимости от того, насколько вы близки к заданным требованиям. Чем ниже оценка, тем лучше вы справились. Звучит легко, но это определенно не так, особенно после некоторых первых уровней.
Играйте в Pixactly: https://www.pixact.ly/
10. Shape Type
Когда я был молодым и свободным графическим дизайнером, я испытывал сложности с рисованием фигур карандашом. Shape Type позволяет показать, как работают векторные фигуры забавным и доступным способом. Если вы новичок в этой сфере, я настоятельно рекомендую вам попробовать эту игру!
Играйте в Shape Type: https://shape.method.ac/
11. Shot the Serif
Вам нужно быть быстрым и стрелять в правильную цель – символы с засечками. Вы можете выбрать свой уровень сложности и решить играть с мобильного устройства или через браузер. Я бросил вызов друзьям-дизайнерам, и это было довольно забавно (хотя, к сожалению, я проиграл!).
Играйте в Shot the Serif: https://www.tothepoint.co.uk/us/fun/i-shot-the-serif/
12. The Bézier Game
Еще одна игра, которая поможет вам улучшить (или развить) навыки работы с пером. Вы можете пройти очень дружелюбное и расслабляющее руководство или пропустить его и сразу приступить к испытанию. Вам нужно будет завершить различные фигуры в заданное количество узлов... звучит легко, не так ли?
Играйте в The Bézier Game: https://bezier.method.ac/
13. The Font Game
Вы получите 30 карточек и переключателей на выбор, что означает, что иногда вы можете выбрать больше, если они соответствуют заданному шрифту. Простая, но увлекательная игра, основанная на знании различных шрифтов.
Играйте в The Font Game: https://ilovetypography.com/2020/05/31/the-font-game
14. The Boolean Game
На данный момент одна из моих любимых игр! Если вы любите использовать фигуры для создания интеллектуальной и красивой графики и иконок, она создана для вас. В логической игре вы можете выбирать между различными модальностями (Union, Subtract, Intersect и Difference) и играть, создавая различные типы фигур. На каждом этапе игра становится немного сложнее, но темп отличный, и вам не придется сильно потеть.
Играйте в The Boolean Game: https://boolean.method.ac/
15. Typewar
Быстрая игра для проверки запоминания шрифтов: вам нужно выбрать один из двух вариантов, набирая очки за каждый правильный ответ. Также есть прогрессия уровня и счетчик, позволяющий проверить, насколько вы точны в своих ответах. Сама игра может быть немного повторяющейся, особенно на первых нескольких уровнях, но это отличный способ познакомиться с рядом наиболее часто используемых шрифтов.
Играйте в Typewar: https://typewar.com/
16. User Inyerface
Вы правильно прочитали; здесь нет опечатки. Это может быть и лучшая, и худшая игра из всего списка одновременно. Это был самый разочаровывающий опыт, который я испытал как пользователь…. Не буду спойлерить, поэтому подробностей об интерфейсе больше не будет. Дисклеймер: никому из моей команды или друзей не удалось пройти эту сумасшедшую игру, поэтому, пожалуйста, поделитесь своими советами, если сможете!
Играйте в User Inyerface: https://userinyerface.com/
Источник
Вам нужно быть быстрым и стрелять в правильную цель – символы с засечками. Вы можете выбрать свой уровень сложности и решить играть с мобильного устройства или через браузер. Я бросил вызов друзьям-дизайнерам, и это было довольно забавно (хотя, к сожалению, я проиграл!).
Играйте в Shot the Serif: https://www.tothepoint.co.uk/us/fun/i-shot-the-serif/
12. The Bézier Game
Еще одна игра, которая поможет вам улучшить (или развить) навыки работы с пером. Вы можете пройти очень дружелюбное и расслабляющее руководство или пропустить его и сразу приступить к испытанию. Вам нужно будет завершить различные фигуры в заданное количество узлов... звучит легко, не так ли?
Играйте в The Bézier Game: https://bezier.method.ac/
13. The Font Game
Вы получите 30 карточек и переключателей на выбор, что означает, что иногда вы можете выбрать больше, если они соответствуют заданному шрифту. Простая, но увлекательная игра, основанная на знании различных шрифтов.
Играйте в The Font Game: https://ilovetypography.com/2020/05/31/the-font-game
14. The Boolean Game
На данный момент одна из моих любимых игр! Если вы любите использовать фигуры для создания интеллектуальной и красивой графики и иконок, она создана для вас. В логической игре вы можете выбирать между различными модальностями (Union, Subtract, Intersect и Difference) и играть, создавая различные типы фигур. На каждом этапе игра становится немного сложнее, но темп отличный, и вам не придется сильно потеть.
Играйте в The Boolean Game: https://boolean.method.ac/
15. Typewar
Быстрая игра для проверки запоминания шрифтов: вам нужно выбрать один из двух вариантов, набирая очки за каждый правильный ответ. Также есть прогрессия уровня и счетчик, позволяющий проверить, насколько вы точны в своих ответах. Сама игра может быть немного повторяющейся, особенно на первых нескольких уровнях, но это отличный способ познакомиться с рядом наиболее часто используемых шрифтов.
Играйте в Typewar: https://typewar.com/
16. User Inyerface
Вы правильно прочитали; здесь нет опечатки. Это может быть и лучшая, и худшая игра из всего списка одновременно. Это был самый разочаровывающий опыт, который я испытал как пользователь…. Не буду спойлерить, поэтому подробностей об интерфейсе больше не будет. Дисклеймер: никому из моей команды или друзей не удалось пройти эту сумасшедшую игру, поэтому, пожалуйста, поделитесь своими советами, если сможете!
Играйте в User Inyerface: https://userinyerface.com/
Источник
Почему «творческая свобода» — это миф?
Если вы работали фрилансером, значит, вы сталкивались с этим явлением. Обсуждая проект, клиент кажется открытым и расслабленным. «Мы доверяем тебе, у тебя полная свобода действий» – говорит он.
Вы с энтузиазмом погружаетесь в проект. Наконец-то, вам предоставили полную творческую свободу. Вы используете полученную возможность, и уверенно работаете, следуя собственноручно выбранному курсу.
Затем вы показываете результат клиенту и он просто в ужасе.
Что случилось?
Вы неверно выбрали направление?
Клиент передумал?
Вы ошиблись?
Хотя вы могли столкнуться с указанными выше проблемами, скорее всего истинная причина кроется в другом.
Не существует полной творческой свободы
Если вы четко не определили, что нужно сделать или чего хочет клиент, вы будете работать наобум и надеяться, что попадете в цель. Скорее всего вы ошибетесь, потому что у клиента не будет критериев для оценки, кроме своего текущего настроения и субъективного вкуса.
Всегда начинайте проект с исследования и брифинга. И, по возможности, напишите собственные брифы – даже если клиент предоставил свои. Это позволит вам определить условия своими словами и убедиться, что ваше понимание проекта совпадает с пониманием вашего клиента. Кроме того, это возможность задать тон и воодушевить клиента, показав, что он не ошибся, выбрав именно вас.
Клиент может сказать, что в этом проекте у вас полная свобода действий, но это не так. Скорее всего, он просто еще не знает, в чем заключаются ограничения. Таким образом, вы сможете помочь определить их, и не делайте это бесплатно. Включите этот этап в смету проекта, чтобы вам за него заплатили.
Только после того, как вы четко определите критерии успеха, вы сможете найти в них свободу творчества. Кроме того, вам будет на что ссылаться, когда представите полученный результат заказчику. Поскольку вы заранее установили цели и ограничения, вы сможете лучше обосновать принятые решения. Клиент может не согласиться с вашим решением, но он не может не согласиться с условиями, которые ранее согласовали.
Ограничения необходимы для творческой работы. Без них ничего не получится. Наш разум вращается в десятках направлений, и в конце концов мы впадаем в отчаяние. Полная «творческая свобода» невозможна, если вы не занимаетесь личным арт-проектом – и даже тогда ограничения полезны.
Задавайте вопросы как можно раньше и чаще
Если вам что-то неясно, даже если кажется, что это мелочь, спросите. Не смягчайте вопрос фразами вроде «просто на всякий случай», «мне интересно, не могли бы вы уточнить» или «просто, чтобы удостовериться». Не беспокойтесь, что можете показаться дилетантом. Просто задайте вопросы.
Когда вы сразу задаете простые вопросы, вы получаете ясные и полезные ответы. Каждый заданный вопрос, снижает вероятность недопонимания в будущем.
Если вы работали фрилансером, значит, вы сталкивались с этим явлением. Обсуждая проект, клиент кажется открытым и расслабленным. «Мы доверяем тебе, у тебя полная свобода действий» – говорит он.
Вы с энтузиазмом погружаетесь в проект. Наконец-то, вам предоставили полную творческую свободу. Вы используете полученную возможность, и уверенно работаете, следуя собственноручно выбранному курсу.
Затем вы показываете результат клиенту и он просто в ужасе.
Что случилось?
Вы неверно выбрали направление?
Клиент передумал?
Вы ошиблись?
Хотя вы могли столкнуться с указанными выше проблемами, скорее всего истинная причина кроется в другом.
Не существует полной творческой свободы
Если вы четко не определили, что нужно сделать или чего хочет клиент, вы будете работать наобум и надеяться, что попадете в цель. Скорее всего вы ошибетесь, потому что у клиента не будет критериев для оценки, кроме своего текущего настроения и субъективного вкуса.
Всегда начинайте проект с исследования и брифинга. И, по возможности, напишите собственные брифы – даже если клиент предоставил свои. Это позволит вам определить условия своими словами и убедиться, что ваше понимание проекта совпадает с пониманием вашего клиента. Кроме того, это возможность задать тон и воодушевить клиента, показав, что он не ошибся, выбрав именно вас.
Клиент может сказать, что в этом проекте у вас полная свобода действий, но это не так. Скорее всего, он просто еще не знает, в чем заключаются ограничения. Таким образом, вы сможете помочь определить их, и не делайте это бесплатно. Включите этот этап в смету проекта, чтобы вам за него заплатили.
Только после того, как вы четко определите критерии успеха, вы сможете найти в них свободу творчества. Кроме того, вам будет на что ссылаться, когда представите полученный результат заказчику. Поскольку вы заранее установили цели и ограничения, вы сможете лучше обосновать принятые решения. Клиент может не согласиться с вашим решением, но он не может не согласиться с условиями, которые ранее согласовали.
Ограничения необходимы для творческой работы. Без них ничего не получится. Наш разум вращается в десятках направлений, и в конце концов мы впадаем в отчаяние. Полная «творческая свобода» невозможна, если вы не занимаетесь личным арт-проектом – и даже тогда ограничения полезны.
Задавайте вопросы как можно раньше и чаще
Если вам что-то неясно, даже если кажется, что это мелочь, спросите. Не смягчайте вопрос фразами вроде «просто на всякий случай», «мне интересно, не могли бы вы уточнить» или «просто, чтобы удостовериться». Не беспокойтесь, что можете показаться дилетантом. Просто задайте вопросы.
Когда вы сразу задаете простые вопросы, вы получаете ясные и полезные ответы. Каждый заданный вопрос, снижает вероятность недопонимания в будущем.
Общайтесь на каждом этапе
Никогда не предполагайте, что вы и ваш клиент находитесь на одной волне. Делайте заметки, отправляйте электронные письма и повторяйте ключевые моменты в конце телефонного разговора. Это не для того, чтобы получить юридические аргументы. Это необходимо для того, чтобы вы были на одной волне и согласовали конечные результаты.
Каждый раз, когда вы делитесь текущим состоянием проекта и направлением его развития, ваш клиент будет чувствовать себя более вовлеченным и заинтересованным в конечном результате. Чем больше вовлечен ваш клиент, тем больше он будет чувствовать, что выполнил свою часть работы, и тем больше ему понравится конечный результат. Дайте ему почувствовать, что ваша работа принадлежит ему, и у вас будет больше шансов на успех.
Ваше общение должно быть ясным и кратким. Никто не хочет получать длинное письмо с дословным пересказом прошедшей встречи. Если вы завалите своего клиента письмами в стиле «скажите, что вы думаете по этому поводу», вы, скорее всего, не получите ответа. Большинство людей будут игнорировать эти письма и в конечном итоге потеряют терпение, когда вы будете докучать им или заморозите проект в ожидании ответа.
Задавайте вопросы кратко и облегчите клиенту ответ. Позвольте ему выбрать один из двух вариантов или сформируйте их так, чтобы можно было ответить просто «да» или «нет». Если у вас несколько вопросов, не отправляйте их все сразу. Если вы должны отправлять более одного вопроса или действия за раз, пронумеруйте список, чтобы клиент мог ответить упорядоченно.
Дизайнеры должны быть проджект-менеджерами, даже если они уже есть в вашей команде, особенно если вы работаете один. Если клиент говорит, «никаких ограничений», ваша задача – добавить ограничения. Сначала это может показаться привлекательным, но расплывчатый, плохо сформулированный проект не принесет вам никакой пользы. Чтобы чувствовать себя свободно в рамках дизайн-проекта, вам нужны границы.
Источник
Никогда не предполагайте, что вы и ваш клиент находитесь на одной волне. Делайте заметки, отправляйте электронные письма и повторяйте ключевые моменты в конце телефонного разговора. Это не для того, чтобы получить юридические аргументы. Это необходимо для того, чтобы вы были на одной волне и согласовали конечные результаты.
Каждый раз, когда вы делитесь текущим состоянием проекта и направлением его развития, ваш клиент будет чувствовать себя более вовлеченным и заинтересованным в конечном результате. Чем больше вовлечен ваш клиент, тем больше он будет чувствовать, что выполнил свою часть работы, и тем больше ему понравится конечный результат. Дайте ему почувствовать, что ваша работа принадлежит ему, и у вас будет больше шансов на успех.
Ваше общение должно быть ясным и кратким. Никто не хочет получать длинное письмо с дословным пересказом прошедшей встречи. Если вы завалите своего клиента письмами в стиле «скажите, что вы думаете по этому поводу», вы, скорее всего, не получите ответа. Большинство людей будут игнорировать эти письма и в конечном итоге потеряют терпение, когда вы будете докучать им или заморозите проект в ожидании ответа.
Задавайте вопросы кратко и облегчите клиенту ответ. Позвольте ему выбрать один из двух вариантов или сформируйте их так, чтобы можно было ответить просто «да» или «нет». Если у вас несколько вопросов, не отправляйте их все сразу. Если вы должны отправлять более одного вопроса или действия за раз, пронумеруйте список, чтобы клиент мог ответить упорядоченно.
Дизайнеры должны быть проджект-менеджерами, даже если они уже есть в вашей команде, особенно если вы работаете один. Если клиент говорит, «никаких ограничений», ваша задача – добавить ограничения. Сначала это может показаться привлекательным, но расплывчатый, плохо сформулированный проект не принесет вам никакой пользы. Чтобы чувствовать себя свободно в рамках дизайн-проекта, вам нужны границы.
Источник
UXPUB 🇺🇦 Дизайн-спільнота
Почему «творческая свобода» — это миф?
Полная «творческая свобода» невозможна, если вы не занимаетесь личным арт-проектом – и даже тогда ограничения полезны
Как сделать простые интерактивные кнопки в Figma
Оживите свой прототип
В YML есть мантра «прототипы важнее презентаций». Прототип делает ваши дизайн-решения реальными и сообщает клиентам или заинтересованным сторонам гораздо больше, чем статичный дизайн. Он также помогает во время проектирования не попасть в «ловушку Dribbble» (быть может, этот дизайн хорошо смотрится на небольшом скриншоте, но как он на самом деле работает?). Создание кнопок, которые ведут себя как кнопки – это маленький шаг к тому, чтобы ваши прототипы действительно ожили. Давайте рассмотрим этот момент подробнее.
Простые кнопки
Это кнопка по умолчанию (default button), кнопка в состоянии наведения курсора (hover state) и в состоянии нажатия (pressed state). Это поможет понять концепцию прототипирования кнопок в Figma.
Оживите свой прототип
В YML есть мантра «прототипы важнее презентаций». Прототип делает ваши дизайн-решения реальными и сообщает клиентам или заинтересованным сторонам гораздо больше, чем статичный дизайн. Он также помогает во время проектирования не попасть в «ловушку Dribbble» (быть может, этот дизайн хорошо смотрится на небольшом скриншоте, но как он на самом деле работает?). Создание кнопок, которые ведут себя как кнопки – это маленький шаг к тому, чтобы ваши прототипы действительно ожили. Давайте рассмотрим этот момент подробнее.
Простые кнопки
Это кнопка по умолчанию (default button), кнопка в состоянии наведения курсора (hover state) и в состоянии нажатия (pressed state). Это поможет понять концепцию прототипирования кнопок в Figma.
Основные правила, прототипирования кнопки:
Ваши кнопки должны быть уникальным экземпляром компонента или фреймом. Итак, если в вашем прототипе есть 4 кнопки, которые вы хотите сделать интерактивными, вам понадобится всего 12 кнопок, чтобы прототип работал (1 в состоянии по умолчанию, 1 в состоянии наведения курсора и 1 в нажатом состоянии для каждой кнопки). На данный момент я не знаю способа связать последовательность прототипов на главной странице компонентов и применить это ко всем экземплярам компонента. (Если я ошибаюсь, пожалуйста, напишите в комментариях!)
Состояния наведения и нажатия должны располагаться за пределами фрейма вашего прототипа, чтобы они работали как оверлей. Просто так «оверлеи» работают в Figma.
Сохраняйте согласованность в именах слоев для функции Smart Animate. Позже мы будем использовать в Figma функцию Smart Animate, поэтому следует последовательно называть слои. (Если вы похожи на меня, то ваши слои обычно называются «Frame 1104», «image 32» или «Vector 200». Следует упорядочить их).
Это простой двухэтапный процесс
Шаг 1 — Состояние наведения курсора
1. Состояние «Наведение курсора»
Ключом к этому прототипу является то, что вы фактически не меняете исходную кнопку «по умолчанию». Вместо этого вы открываете оверлей кнопки в «состоянии наведения курсора» непосредственно поверх кнопки в состоянии по умолчанию. Это делается путем создания прототипа взаимодействия «While Hovering», который запускает оверлей кнопки в состоянии наведения курсора.
Если в первом раскрывающемся списке в разделе «Overlay» вы выберете «Manual» (Вручную), Figma автоматически разместит новую кнопку в состоянии наведения курсора поверх кнопки в состоянии по умолчанию. Обязательно проверьте, чтобы оверлей располагался поверх вашей изначальной кнопки.
Шаг 2 — Нажатая кнопка
2. Кнопка в нажатом состоянии
Теперь, когда открыто состояние наведения курсора, мы создадим второй этап нашего взаимодействия. Для этого создайте прототип взаимодействия «While Pressing» на кнопке в состоянии наведения курсора, который запускает команду «Swap With» с кнопкой в нажатом состоянии. Думаю, технически вы можете открыть другой оверлей, но тогда мы не сможем использовать функцию Smart Animate.
Этап 3 — «По нажатию» (On Click)
3. Сделайте кнопку функциональной (необязательно)
Хорошо, это трехэтапный процесс, если вы хотите, чтобы ваша кнопка действительно что-то делала. Чтобы сделать кнопку функциональной, просто добавьте к нажатой кнопке прототип взаимодействия «On Click», чтобы она позволила перейти на новую страницу, открыла модальное окно и т.д. ?
Вот и все! Ниже, в качестве примера, приведен мой проект Figma, демонстрирующий изложенные выше правила:
Кнопки должны быть уникальным экземпляром компонента или фреймом.
Состояния наведения и нажатия должны располагаться вне фрейма прототипа, чтобы работать как оверлей.
Сохраняйте согласованность названий слоев для корректной работы функции Smart Animate.
Источник
Ваши кнопки должны быть уникальным экземпляром компонента или фреймом. Итак, если в вашем прототипе есть 4 кнопки, которые вы хотите сделать интерактивными, вам понадобится всего 12 кнопок, чтобы прототип работал (1 в состоянии по умолчанию, 1 в состоянии наведения курсора и 1 в нажатом состоянии для каждой кнопки). На данный момент я не знаю способа связать последовательность прототипов на главной странице компонентов и применить это ко всем экземплярам компонента. (Если я ошибаюсь, пожалуйста, напишите в комментариях!)
Состояния наведения и нажатия должны располагаться за пределами фрейма вашего прототипа, чтобы они работали как оверлей. Просто так «оверлеи» работают в Figma.
Сохраняйте согласованность в именах слоев для функции Smart Animate. Позже мы будем использовать в Figma функцию Smart Animate, поэтому следует последовательно называть слои. (Если вы похожи на меня, то ваши слои обычно называются «Frame 1104», «image 32» или «Vector 200». Следует упорядочить их).
Это простой двухэтапный процесс
Шаг 1 — Состояние наведения курсора
1. Состояние «Наведение курсора»
Ключом к этому прототипу является то, что вы фактически не меняете исходную кнопку «по умолчанию». Вместо этого вы открываете оверлей кнопки в «состоянии наведения курсора» непосредственно поверх кнопки в состоянии по умолчанию. Это делается путем создания прототипа взаимодействия «While Hovering», который запускает оверлей кнопки в состоянии наведения курсора.
Если в первом раскрывающемся списке в разделе «Overlay» вы выберете «Manual» (Вручную), Figma автоматически разместит новую кнопку в состоянии наведения курсора поверх кнопки в состоянии по умолчанию. Обязательно проверьте, чтобы оверлей располагался поверх вашей изначальной кнопки.
Шаг 2 — Нажатая кнопка
2. Кнопка в нажатом состоянии
Теперь, когда открыто состояние наведения курсора, мы создадим второй этап нашего взаимодействия. Для этого создайте прототип взаимодействия «While Pressing» на кнопке в состоянии наведения курсора, который запускает команду «Swap With» с кнопкой в нажатом состоянии. Думаю, технически вы можете открыть другой оверлей, но тогда мы не сможем использовать функцию Smart Animate.
Этап 3 — «По нажатию» (On Click)
3. Сделайте кнопку функциональной (необязательно)
Хорошо, это трехэтапный процесс, если вы хотите, чтобы ваша кнопка действительно что-то делала. Чтобы сделать кнопку функциональной, просто добавьте к нажатой кнопке прототип взаимодействия «On Click», чтобы она позволила перейти на новую страницу, открыла модальное окно и т.д. ?
Вот и все! Ниже, в качестве примера, приведен мой проект Figma, демонстрирующий изложенные выше правила:
Кнопки должны быть уникальным экземпляром компонента или фреймом.
Состояния наведения и нажатия должны располагаться вне фрейма прототипа, чтобы работать как оверлей.
Сохраняйте согласованность названий слоев для корректной работы функции Smart Animate.
Источник
UXPUB 🇺🇦 Дизайн-спільнота
Как сделать простые интерактивные кнопки в Figma за 2 шага
Создание кнопок, которые ведут себя как кнопки – это маленький шаг к тому, чтобы ваши прототипы действительно ожили
Как сделать дизайн сайта через призму UX? Без танцев с бубном, SMS и регистрации
С чего начинается работа по дизайну сайта? Почему Вася делает дизайн за 30 тысяч, Лена — за 150 тысяч, а известная студия — за 1 миллион? Почему конкурент сделал сайт за 200 тысяч, а мой будет стоить 500? И можно ли вообще сделать сайт раз и навсегда, без всяких этих этапов согласования и правок?
Представим себе некоего заказчика в вакууме, который пришел со своей идеей. В лучшем случае, у него есть небольшое ТЗ и несколько зарисовок ручкой (влитых в Figma, Miro или GDocs).
Ему нужен дизайн стартапа: веб-версия, 2 приложения и немного макулатуры для инвесторов. С чего же начать? Нет, не с фейспалма. Уверяю — такое встречается сплошь и рядом. Нацепив дежурную улыбку, я отправляю в бой менеджера проектов (с навыками UX) и иду пить кофе в ближайший Старбакс, на время забывая о заказчике.
Шаг 1. Разбираем проект.
Итак, PM, одаренный широким кругозором, усиленно пытается понять, с чем едят полученный проект. Иногда в разговоре с заказчиком приходится скатываться до очевидностей: «Почему треугольничек не вставляется в круглое отверстие, нипанимаааааюююю…»
Итогом этапа, в идеале, должно стать:
flow или короткое ТЗ на проект;
базовый прототип с основным функционалом;
краткое и емкое пояснение: для чего делается проект, какие есть конкуренты, как планируется монетизация, основные плюсы и минусы запуска проекта.
Что могу посоветовать:
не пренебрегайте созвоном или личной встречей с клиентом. Даже если ваша интроверсия приобретает критические масштабы. За время карантина (ох, простите, самоизоляции) я встретилась как минимум с 3 ситуациями, когда часовые переписки составляли исключительно неверное представление о проекте. И да, не столкнувшись с этим, я бы сама себе не поверила.
не стесняйтесь задавать глупые вопросы. Порой самый глупый вопрос может открыть невиданные ранее грани проекта.
составьте чеклист того, что вы хотите получить от клиента. И не продолжайте проект, пока не получите всё.
если на этом этапе даже вы понимаете что проект не взлетит, и промдизайн летающего ТС в виде топора очевиден только вам, попробуйте мягко убедиться в том что вы поняли все верно (селф-тест на дурака): наглядно представьте топор заказчику. Если ваш оппонент не видит ничего зазорного в происходящем — акститесь, лучше отказаться, чем получить минус в карму.
Шаг 2. Пилим сырые прототипы, изучаем конкурентов & составляем CJM
На этом этапе я обсуждаю с командой и заказчиком сырые прототипы. Все происходящее постепенно обрастает подробностями. И как раз тут нужен профессионализм всех участников. В этот момент понимаешь, почему менеджер проектов, которому ты платишь 1500 в час, отрабатывает их на 150% — и даже немножечко больше.
Затем сравниваем то, что получилось, с конкурентами. Иногда они есть — но чаще всего нет. И даже похожего ничего нет. Стартапы — штука веселая, да. В таком случае ищем аналогии, другие сервисы со схожей моделью работы (и из других тематик тоже). Сравниваем логику, упрощаем, составляем листы сравнений с конкурентами и псевдоконкурентами, дорабатываем прототип.
Наступает время создавать CJM. Приветствую UX инженера, аналитика... И хотела бы я сказать, что снова ухожу пить кофе — но нет. Втроем мы собираем группы клиентов, согласовываем с заказчиком, вживаемся в роли/приглашаем респондентов, раскладываем прототипы и начинаем штормить. В подробностях посмотреть, как создавать CJM, можно, например, тут https://vc.ru/marketing/96029-instrukciya-po-sostavleniyu-customer-journey-map-cjm. Созданию CJM я могу посвятить отдельный лонгрид и это обязательно когда-нибудь произойдет.
С чего начинается работа по дизайну сайта? Почему Вася делает дизайн за 30 тысяч, Лена — за 150 тысяч, а известная студия — за 1 миллион? Почему конкурент сделал сайт за 200 тысяч, а мой будет стоить 500? И можно ли вообще сделать сайт раз и навсегда, без всяких этих этапов согласования и правок?
Представим себе некоего заказчика в вакууме, который пришел со своей идеей. В лучшем случае, у него есть небольшое ТЗ и несколько зарисовок ручкой (влитых в Figma, Miro или GDocs).
Ему нужен дизайн стартапа: веб-версия, 2 приложения и немного макулатуры для инвесторов. С чего же начать? Нет, не с фейспалма. Уверяю — такое встречается сплошь и рядом. Нацепив дежурную улыбку, я отправляю в бой менеджера проектов (с навыками UX) и иду пить кофе в ближайший Старбакс, на время забывая о заказчике.
Шаг 1. Разбираем проект.
Итак, PM, одаренный широким кругозором, усиленно пытается понять, с чем едят полученный проект. Иногда в разговоре с заказчиком приходится скатываться до очевидностей: «Почему треугольничек не вставляется в круглое отверстие, нипанимаааааюююю…»
Итогом этапа, в идеале, должно стать:
flow или короткое ТЗ на проект;
базовый прототип с основным функционалом;
краткое и емкое пояснение: для чего делается проект, какие есть конкуренты, как планируется монетизация, основные плюсы и минусы запуска проекта.
Что могу посоветовать:
не пренебрегайте созвоном или личной встречей с клиентом. Даже если ваша интроверсия приобретает критические масштабы. За время карантина (ох, простите, самоизоляции) я встретилась как минимум с 3 ситуациями, когда часовые переписки составляли исключительно неверное представление о проекте. И да, не столкнувшись с этим, я бы сама себе не поверила.
не стесняйтесь задавать глупые вопросы. Порой самый глупый вопрос может открыть невиданные ранее грани проекта.
составьте чеклист того, что вы хотите получить от клиента. И не продолжайте проект, пока не получите всё.
если на этом этапе даже вы понимаете что проект не взлетит, и промдизайн летающего ТС в виде топора очевиден только вам, попробуйте мягко убедиться в том что вы поняли все верно (селф-тест на дурака): наглядно представьте топор заказчику. Если ваш оппонент не видит ничего зазорного в происходящем — акститесь, лучше отказаться, чем получить минус в карму.
Шаг 2. Пилим сырые прототипы, изучаем конкурентов & составляем CJM
На этом этапе я обсуждаю с командой и заказчиком сырые прототипы. Все происходящее постепенно обрастает подробностями. И как раз тут нужен профессионализм всех участников. В этот момент понимаешь, почему менеджер проектов, которому ты платишь 1500 в час, отрабатывает их на 150% — и даже немножечко больше.
Затем сравниваем то, что получилось, с конкурентами. Иногда они есть — но чаще всего нет. И даже похожего ничего нет. Стартапы — штука веселая, да. В таком случае ищем аналогии, другие сервисы со схожей моделью работы (и из других тематик тоже). Сравниваем логику, упрощаем, составляем листы сравнений с конкурентами и псевдоконкурентами, дорабатываем прототип.
Наступает время создавать CJM. Приветствую UX инженера, аналитика... И хотела бы я сказать, что снова ухожу пить кофе — но нет. Втроем мы собираем группы клиентов, согласовываем с заказчиком, вживаемся в роли/приглашаем респондентов, раскладываем прототипы и начинаем штормить. В подробностях посмотреть, как создавать CJM, можно, например, тут https://vc.ru/marketing/96029-instrukciya-po-sostavleniyu-customer-journey-map-cjm. Созданию CJM я могу посвятить отдельный лонгрид и это обязательно когда-нибудь произойдет.
В итоге имеем:
прототипы v2;
обзор конкурентов;
CJM.
Только после этого шага можно сказать, что мы подобрались напрямую к работе над дизайном сайта.
Шаг 3. Делаем прототип и UX копирайтинг
Все прототипы, которые мы делали до этого, можно назвать базовыми. Теперь мы создаем финальный прототип, на основании которого будем делать опрос ЦА и — после доработки — дизайн.
Тут все очевидно — если нужно нечто “вау”, берем Digital Producer и UX Copywriter. Если нет — можно обойтись своими силами. Превращаем литры кофе в кликабельный прототип, который закрывает максимум потребностей по CJM. Да, кажется Старбакс уже должен оформить мне программу лояльности.
Кстати — многие спрашивают, кто такой UX копирайтер, и почему он столько стоит. Этот персонаж, в первую очередь — психолог и UX аналитик, и лишь во вторую — человек пера. Он обладает знаниями о поведении пользователей и умеет работать с прототипами и CJM. Текст, написанный UX'ером, упрощает пользовательский путь и, в целом, быстрее ведет к понятной юзеру конверсии.
Получившийся детализированный прототип + тексты уже похожи на дизайн, и все созданное можно смело закидывать в ЦА, подкрепляя вопросами аналитика. По ответам — дорабатываем.
Итого, после этого этапа мы имеем:
прототип в деталях;
листы опросов;
тексты — на прототипе и в отдельных файлах.
Шаг 4. Дизайн и иллюстрации
Ура! Наконец-то мы подобрались непосредственно к дизайну! На основании конкурентов, best practices, хотелок клиента, желаний левой пятки в полнолуние — рисуем дизайн и иллюстрации. Порой обсуждаем. Порой до 20+ раз одну страницу (реальная цифра: привет, Антон!). На серьезных проектах, которыми пользуются тысячи людей, количество обсуждений не имеет решающего значения — важен исключительно результат.
Обсуждаем итоговый дизайн с клиентом, тестируем на ЦА, дорабатываем.
Получается:
кликабельный дизайн в Figma (320px+768px+1140px+big);
иллюстрации в векторе;
геморрой у арт-директора (ладно-ладно, не всегда)
Шаг 5. ТЗ для верстальщика и ревью
Уф, один из самых сложных этапов. Нужно собрать весь наш супердизайн и максимально толково объяснить верстальщику, чего мы от него хотим. Иногда такое ТЗ занимает больше страниц, чем вся собранная до этого информация по проекту.
Пишем, не забывая скриншоты:
поведение каждого элемента при масштабировании;
сценарии анимаций, ховеров и прочая-прочая;
все возможные исключения;
подробные техтребования: браузеры, стили, сборка, специфические пожелания.
После верстки проверяем с разных устройств и корректируем получившуюся работу. До 3 итераций — норма, 4я — повод сменить верстальщика. Кстати, многие думают, что работа front-end'а не так уж важна, рутинна — и делать ее сможет даже обезьяна. Я в корне не согласна с этим мнением. На мой взгляд, за хорошего верстальщика, который еще и развивается, стоит держаться, как за любимый айфон.
Результат этого этапа:
тз для верстальщика;
готовая верстка.
Шаг 6. Программинг
Как дизайнер я могу помочь Заказчику определить приоритетный фронт работ и дать свои рекомендации по итерациям.
В роли UX-специалиста я понимаю — что стоит сделать в первую очередь, чтобы выпустить не самый куцый MVP. Пользоваться этими рекомендациями или нет — уже выбор тимлида.
Также, иногда рекомендую стек — когда на моем пути встречаются оригиналы, которые в 2К20-м разрабатывают на плюсах то, что практически не касается железа. Разработка на том же Питоне, с учетом планируемых нагрузок, будет и в 10 раз дешевле, и в 10 раз быстрее. Я не претендую на экспертность в выборе стека и часто сама обращаюсь за советом. Но когда вижу, что клиент пытается прыгнуть на грабли с разбега — стараюсь убедить хотя бы выбрать лопату вместо грабель.
В конце этого этапа мы получаем:
документ, расставляющий приоритеты разработки с точки зрения бизнеса;
предложения по стеку (чаще всего — несколько).
прототипы v2;
обзор конкурентов;
CJM.
Только после этого шага можно сказать, что мы подобрались напрямую к работе над дизайном сайта.
Шаг 3. Делаем прототип и UX копирайтинг
Все прототипы, которые мы делали до этого, можно назвать базовыми. Теперь мы создаем финальный прототип, на основании которого будем делать опрос ЦА и — после доработки — дизайн.
Тут все очевидно — если нужно нечто “вау”, берем Digital Producer и UX Copywriter. Если нет — можно обойтись своими силами. Превращаем литры кофе в кликабельный прототип, который закрывает максимум потребностей по CJM. Да, кажется Старбакс уже должен оформить мне программу лояльности.
Кстати — многие спрашивают, кто такой UX копирайтер, и почему он столько стоит. Этот персонаж, в первую очередь — психолог и UX аналитик, и лишь во вторую — человек пера. Он обладает знаниями о поведении пользователей и умеет работать с прототипами и CJM. Текст, написанный UX'ером, упрощает пользовательский путь и, в целом, быстрее ведет к понятной юзеру конверсии.
Получившийся детализированный прототип + тексты уже похожи на дизайн, и все созданное можно смело закидывать в ЦА, подкрепляя вопросами аналитика. По ответам — дорабатываем.
Итого, после этого этапа мы имеем:
прототип в деталях;
листы опросов;
тексты — на прототипе и в отдельных файлах.
Шаг 4. Дизайн и иллюстрации
Ура! Наконец-то мы подобрались непосредственно к дизайну! На основании конкурентов, best practices, хотелок клиента, желаний левой пятки в полнолуние — рисуем дизайн и иллюстрации. Порой обсуждаем. Порой до 20+ раз одну страницу (реальная цифра: привет, Антон!). На серьезных проектах, которыми пользуются тысячи людей, количество обсуждений не имеет решающего значения — важен исключительно результат.
Обсуждаем итоговый дизайн с клиентом, тестируем на ЦА, дорабатываем.
Получается:
кликабельный дизайн в Figma (320px+768px+1140px+big);
иллюстрации в векторе;
геморрой у арт-директора (ладно-ладно, не всегда)
Шаг 5. ТЗ для верстальщика и ревью
Уф, один из самых сложных этапов. Нужно собрать весь наш супердизайн и максимально толково объяснить верстальщику, чего мы от него хотим. Иногда такое ТЗ занимает больше страниц, чем вся собранная до этого информация по проекту.
Пишем, не забывая скриншоты:
поведение каждого элемента при масштабировании;
сценарии анимаций, ховеров и прочая-прочая;
все возможные исключения;
подробные техтребования: браузеры, стили, сборка, специфические пожелания.
После верстки проверяем с разных устройств и корректируем получившуюся работу. До 3 итераций — норма, 4я — повод сменить верстальщика. Кстати, многие думают, что работа front-end'а не так уж важна, рутинна — и делать ее сможет даже обезьяна. Я в корне не согласна с этим мнением. На мой взгляд, за хорошего верстальщика, который еще и развивается, стоит держаться, как за любимый айфон.
Результат этого этапа:
тз для верстальщика;
готовая верстка.
Шаг 6. Программинг
Как дизайнер я могу помочь Заказчику определить приоритетный фронт работ и дать свои рекомендации по итерациям.
В роли UX-специалиста я понимаю — что стоит сделать в первую очередь, чтобы выпустить не самый куцый MVP. Пользоваться этими рекомендациями или нет — уже выбор тимлида.
Также, иногда рекомендую стек — когда на моем пути встречаются оригиналы, которые в 2К20-м разрабатывают на плюсах то, что практически не касается железа. Разработка на том же Питоне, с учетом планируемых нагрузок, будет и в 10 раз дешевле, и в 10 раз быстрее. Я не претендую на экспертность в выборе стека и часто сама обращаюсь за советом. Но когда вижу, что клиент пытается прыгнуть на грабли с разбега — стараюсь убедить хотя бы выбрать лопату вместо грабель.
В конце этого этапа мы получаем:
документ, расставляющий приоритеты разработки с точки зрения бизнеса;
предложения по стеку (чаще всего — несколько).
Шаг 7. Тестирование на устройствах, нагрузочное тестирование
Вместе с помощниками тестирую конечный результат на небольшом зоопарке устройств. Да, на профессиональном уровне этим занимаются тестировщики — сторонние или на стороне клиента. Однако последние — как показала практика — часто не видят очевидных моментов по дизайну.
И это не камень в огород тестировщиков. Задача QA часто ставится заказчиком в контексте: “Проверить, что все работает и найти баги”. А улетевшая на 5px кнопка или несовпадение шрифта — не баги же.
А со мной такое не прокатит. Поэтому я еще раз делаю ревью полученного продукта с точки зрения дизайна и скорости работы.
Результат этого шага:
документ с правками по дизайну;
документы, отражающие скорость работы продукта и баги на конкретных (чаще всего — мобильных) устройствах.
Шаг 8. Запуск трафика, A/B тесты, выводы
После запуска продукта смотрю на происходящее. Вместе с UX инженером мы ищем проблемные моменты, на которых пользователь может выпадать из контекста или уходить по своим причинам.
Поднимаю составленные на Шаге 3 общие идеи для A/B тестирования, добавляю те, которые появились после запуска продукта, планирую их в итерации, обсуждаю с клиентом и рисую.
В таком состоянии проект переходит на постоянную поддержку, в которую входит:
A/B тестирование;
Отрисовка нового функционала, обновлений;
Создание креативов, баннеров, графики для рекламы и т.д.
В конечном счете Заказчик получает команду, с которой удобно работать. Стоимость таких услуг в месяц редко превышает З/П одного-двух дизайнеров на постоянке. Однако компетенций у нас намного больше, а также мы предоставляем расширенные возможности по аналитике и тестированию и имеем большой пул подрядчиков по программированию и других digital-специалистов. Поэтому выгода тут очевидна.
По итогам этапа получаем:
документ, содержащий план на A/B тесты, отрисованные блоки для тестирования, регламент тестирования;
договор на поддержку клиента.
И главный вопрос всех клиентов: почему мы должны тебе верить? Почему мы должны платить такую сумму?
Да, я такой же дизайнер, как и тысячи других. Писать этот материал заставила меня та боль, которую я испытала, сделав за последние полгода несколько проектов из финтеха и схожих тематик ТЗ: “Хотел бы, чтобы вы сделали игру, 3Д-экшон, суть такова…” И что-то там про “корованы”, задачи застройщиков, стартапы и прочие радости жизни. И мне очень хотелось бы, чтобы вы этой боли избежали. А именно — правильно считали проекты и привлекали нужных специалистов, когда вашей квалификации не хватает.
Будем честны. В одиночку качественно пройти все эти этапы практически нереально. И вряд ли вы — тот Д’Артаньян, который пребывает исключительно в окружении лиц мононаправленной ориентации, и может всё. Всегда будет страдать что-то, что в конечном счете обернется для заказчика финансовыми и временными потерями. А зачем вам это надо?
И да, я понимаю, что в каких-то моментах — я не самый удобный подрядчик. Я откажу заказчику, если он будет предлагать срезать половину вышеперечисленных этапов; если увижу что человек не готов к партнерским отношениям; если пойму, что во мне видят многорукого многонога и не готовы работать с моей командой.
И всё-таки. Сколько в кассу?
Себестоимость лендинга, проработанного по такой схеме — не менее 70.000 рублей. С учетом издержек, минимальной прибыли — получаем 100.000 рублей и выше.
Стартапы, приложения в самой простой реализации обходятся в 150.000 — 600.000 рублей и более.
Сложные решения по типу “а сделайте мне досье по всем клиентам финучреждения с модулями, блэкджеком и дамами” — от 1.000.000 рублей только за дизайн и это себестоимость (!).
Сколько берут при этом крупные студии, которые собрали у себя под крылом достойных профессионалов — мне и подумать страшно, с их-то издержками. Да и ДМС, как и корпоративный авто, сам себя не купит.
При работе с крупными проектами на взаимодействие с клиентом и его ЦА может уходить до ¼ рабочего времени. Это тоже нужно учитывать при планировании проекта.
Вместе с помощниками тестирую конечный результат на небольшом зоопарке устройств. Да, на профессиональном уровне этим занимаются тестировщики — сторонние или на стороне клиента. Однако последние — как показала практика — часто не видят очевидных моментов по дизайну.
И это не камень в огород тестировщиков. Задача QA часто ставится заказчиком в контексте: “Проверить, что все работает и найти баги”. А улетевшая на 5px кнопка или несовпадение шрифта — не баги же.
А со мной такое не прокатит. Поэтому я еще раз делаю ревью полученного продукта с точки зрения дизайна и скорости работы.
Результат этого шага:
документ с правками по дизайну;
документы, отражающие скорость работы продукта и баги на конкретных (чаще всего — мобильных) устройствах.
Шаг 8. Запуск трафика, A/B тесты, выводы
После запуска продукта смотрю на происходящее. Вместе с UX инженером мы ищем проблемные моменты, на которых пользователь может выпадать из контекста или уходить по своим причинам.
Поднимаю составленные на Шаге 3 общие идеи для A/B тестирования, добавляю те, которые появились после запуска продукта, планирую их в итерации, обсуждаю с клиентом и рисую.
В таком состоянии проект переходит на постоянную поддержку, в которую входит:
A/B тестирование;
Отрисовка нового функционала, обновлений;
Создание креативов, баннеров, графики для рекламы и т.д.
В конечном счете Заказчик получает команду, с которой удобно работать. Стоимость таких услуг в месяц редко превышает З/П одного-двух дизайнеров на постоянке. Однако компетенций у нас намного больше, а также мы предоставляем расширенные возможности по аналитике и тестированию и имеем большой пул подрядчиков по программированию и других digital-специалистов. Поэтому выгода тут очевидна.
По итогам этапа получаем:
документ, содержащий план на A/B тесты, отрисованные блоки для тестирования, регламент тестирования;
договор на поддержку клиента.
И главный вопрос всех клиентов: почему мы должны тебе верить? Почему мы должны платить такую сумму?
Да, я такой же дизайнер, как и тысячи других. Писать этот материал заставила меня та боль, которую я испытала, сделав за последние полгода несколько проектов из финтеха и схожих тематик ТЗ: “Хотел бы, чтобы вы сделали игру, 3Д-экшон, суть такова…” И что-то там про “корованы”, задачи застройщиков, стартапы и прочие радости жизни. И мне очень хотелось бы, чтобы вы этой боли избежали. А именно — правильно считали проекты и привлекали нужных специалистов, когда вашей квалификации не хватает.
Будем честны. В одиночку качественно пройти все эти этапы практически нереально. И вряд ли вы — тот Д’Артаньян, который пребывает исключительно в окружении лиц мононаправленной ориентации, и может всё. Всегда будет страдать что-то, что в конечном счете обернется для заказчика финансовыми и временными потерями. А зачем вам это надо?
И да, я понимаю, что в каких-то моментах — я не самый удобный подрядчик. Я откажу заказчику, если он будет предлагать срезать половину вышеперечисленных этапов; если увижу что человек не готов к партнерским отношениям; если пойму, что во мне видят многорукого многонога и не готовы работать с моей командой.
И всё-таки. Сколько в кассу?
Себестоимость лендинга, проработанного по такой схеме — не менее 70.000 рублей. С учетом издержек, минимальной прибыли — получаем 100.000 рублей и выше.
Стартапы, приложения в самой простой реализации обходятся в 150.000 — 600.000 рублей и более.
Сложные решения по типу “а сделайте мне досье по всем клиентам финучреждения с модулями, блэкджеком и дамами” — от 1.000.000 рублей только за дизайн и это себестоимость (!).
Сколько берут при этом крупные студии, которые собрали у себя под крылом достойных профессионалов — мне и подумать страшно, с их-то издержками. Да и ДМС, как и корпоративный авто, сам себя не купит.
При работе с крупными проектами на взаимодействие с клиентом и его ЦА может уходить до ¼ рабочего времени. Это тоже нужно учитывать при планировании проекта.
В завершении
Я намеренно опустила некоторые этапы, ценность которых может быть высокой на проектах >1.000.000 рублей и старалась не ругаться, бросаясь в вас терминами типа RITE, ET, Desk Research и т.д.
Буду рада конструктивной критике, предложениям, вашим историям взаимодействия с клиентами. Всяко, наша общая цель — делать сайты лучше, удовлетворять заказчиков и их клиентов, попутно занимаясь тем, что нам нравится на профессиональном уровне.
OMG! Статья изобилует сарказмом. Пожалуйста, воздержитесь от прочтения, если это вам не близко. Говорят, люди, не понимающие сарказм — читают с конца.
Источник: https://vc.ru/design/183789-kak-sdelat-dizayn-sayta-cherez-prizmu-ux-bez-tancev-s-bubnom-sms-i-registracii
Я намеренно опустила некоторые этапы, ценность которых может быть высокой на проектах >1.000.000 рублей и старалась не ругаться, бросаясь в вас терминами типа RITE, ET, Desk Research и т.д.
Буду рада конструктивной критике, предложениям, вашим историям взаимодействия с клиентами. Всяко, наша общая цель — делать сайты лучше, удовлетворять заказчиков и их клиентов, попутно занимаясь тем, что нам нравится на профессиональном уровне.
OMG! Статья изобилует сарказмом. Пожалуйста, воздержитесь от прочтения, если это вам не близко. Говорят, люди, не понимающие сарказм — читают с конца.
Источник: https://vc.ru/design/183789-kak-sdelat-dizayn-sayta-cherez-prizmu-ux-bez-tancev-s-bubnom-sms-i-registracii
vc.ru
Как сделать дизайн сайта через призму UX? Без танцев с бубном, SMS и регистрации — Дизайн на vc.ru
С чего начинается работа по дизайну сайта? Почему Вася делает дизайн за 30 тысяч, Лена — за 150 тысяч, а известная студия — за 1 миллион? Почему конкурент сделал сайт за 200 тысяч, а мой будет стоить 500? И можно ли вообще сделать сайт раз и навсегда, без…
Доступный дизайн: как сделать интерфейс удобным для пожилых
Дизайн не только решает коммерческие задачи, но и делает жизнь людей комфортнее. UX — концепция, которая основана на идее качества и удобства, и перед ней все должны быть равны.
Пандемия привела в интернет всех. Вашим бабуле и дедуле уже не хватает кнопочного телефона и телевизора? Давайте вместе посмотрим, как сделать цифровое пространство для них комфортным.
Мы все когда-нибудь состаримся
Неприятные новости: мы стареем с 20 лет. К 40 годам хрусталик глаза теряет эластичность, и зрение падает. Это естественный процесс, из-за которого становится все труднее читать мелкий текст.
В период с 25 до 60 лет способность использовать сайты снижается на 0,8% в год. Людям нужно больше времени на странице, чтобы сориентироваться и выполнить задачу.
К 2050 году каждый шестой человек в мире будет старше 65 лет.
По прогнозам ООН, число людей в возрасте 80 лет и старше утроится: с 143 миллионов в 2019 году до 426 миллионов в 2050 году.
В общем, мы все когда-нибудь состаримся. Этот факт должен подтолкнуть нас по-другому посмотреть на возрастное поколение уже сейчас.
Ситуация в России
Аудитория интернета в России выросла в 2019 году за счёт пенсионеров. Больше всего прибавилось пользователей в категориях 65+ (с 26 до 36%) и 50-64 года (с 63 до 66%).
Росстат говорит, что в 2020 году более половины россиян старше 55 лет свободно пользовались интернетом.
В основном старшее поколение общается в соцсетях, читает новости и изучает информацию о товарах и услугах. При этом только 10% из них покупают онлайн.
Из тех, кто всё же решается, 73% оплачивают покупки банковскими картами, а не через электронные кошельки. 46% проводят финансовые операции в сети — с ценными бумагами, денежными переводами и оплатой счетов.
Центр изучения пенсионной реформы в своём исследовании сделал вывод, что людям от 55 до 75 лет легко осваивать интернет. Почти 100% из них познакомились с компьютером ещё на рабочем месте.
Основные мотивы заходить в интернет для них — поиск источников дохода, интерес к новой информации и рекомендации родственников.
Растёт уровень компьютерной грамотности пенсионеров:
92% пожилых людей самостоятельно могут открывать файлы любого формата;
74% умеют копировать и сохранять информацию;
56% сами удаляют и устанавливают программы из сети;
43% умеют пользоваться текстовыми редакторами;
37% освоили электронную почту.
Возрастные пользователи ежедневно проводят в интернете от 3 до 6 часов. Многие предпочитают его телевизору.
Что на Западе
В США цифровая грамотность населения также растёт. Пользователи старше 65 лет могут самостоятельно:
установить блокировщик рекламы на свои компьютеры;
фильтровать поисковую выдачу, игнорируя спонсируемые результаты и рекламу;
удалять приложения, отнимающих много времени, например, игры;
удалять аккаунты с сервисов, которые собрали слишком много личных данных.
Мотивы использовать интернет у пожилых в США:
следить за текущими событиями;
управлять деньгами;
делать покупки;
искать интересующую информацию;
поддерживать связь с друзьями и семьей.
Участники исследования Nielsen Norman group положительно отзывались о появлении интернета в их жизни. Один 87-летний респондент сказал: «Выход в интернет заставил меня почувствовать себя намного более независимым».
С 2011 по 2016 год количество владельцев смартфонов среди людей старше 65 лет увеличилось в четыре раза.
Дизайн не только решает коммерческие задачи, но и делает жизнь людей комфортнее. UX — концепция, которая основана на идее качества и удобства, и перед ней все должны быть равны.
Пандемия привела в интернет всех. Вашим бабуле и дедуле уже не хватает кнопочного телефона и телевизора? Давайте вместе посмотрим, как сделать цифровое пространство для них комфортным.
Мы все когда-нибудь состаримся
Неприятные новости: мы стареем с 20 лет. К 40 годам хрусталик глаза теряет эластичность, и зрение падает. Это естественный процесс, из-за которого становится все труднее читать мелкий текст.
В период с 25 до 60 лет способность использовать сайты снижается на 0,8% в год. Людям нужно больше времени на странице, чтобы сориентироваться и выполнить задачу.
К 2050 году каждый шестой человек в мире будет старше 65 лет.
По прогнозам ООН, число людей в возрасте 80 лет и старше утроится: с 143 миллионов в 2019 году до 426 миллионов в 2050 году.
В общем, мы все когда-нибудь состаримся. Этот факт должен подтолкнуть нас по-другому посмотреть на возрастное поколение уже сейчас.
Ситуация в России
Аудитория интернета в России выросла в 2019 году за счёт пенсионеров. Больше всего прибавилось пользователей в категориях 65+ (с 26 до 36%) и 50-64 года (с 63 до 66%).
Росстат говорит, что в 2020 году более половины россиян старше 55 лет свободно пользовались интернетом.
В основном старшее поколение общается в соцсетях, читает новости и изучает информацию о товарах и услугах. При этом только 10% из них покупают онлайн.
Из тех, кто всё же решается, 73% оплачивают покупки банковскими картами, а не через электронные кошельки. 46% проводят финансовые операции в сети — с ценными бумагами, денежными переводами и оплатой счетов.
Центр изучения пенсионной реформы в своём исследовании сделал вывод, что людям от 55 до 75 лет легко осваивать интернет. Почти 100% из них познакомились с компьютером ещё на рабочем месте.
Основные мотивы заходить в интернет для них — поиск источников дохода, интерес к новой информации и рекомендации родственников.
Растёт уровень компьютерной грамотности пенсионеров:
92% пожилых людей самостоятельно могут открывать файлы любого формата;
74% умеют копировать и сохранять информацию;
56% сами удаляют и устанавливают программы из сети;
43% умеют пользоваться текстовыми редакторами;
37% освоили электронную почту.
Возрастные пользователи ежедневно проводят в интернете от 3 до 6 часов. Многие предпочитают его телевизору.
Что на Западе
В США цифровая грамотность населения также растёт. Пользователи старше 65 лет могут самостоятельно:
установить блокировщик рекламы на свои компьютеры;
фильтровать поисковую выдачу, игнорируя спонсируемые результаты и рекламу;
удалять приложения, отнимающих много времени, например, игры;
удалять аккаунты с сервисов, которые собрали слишком много личных данных.
Мотивы использовать интернет у пожилых в США:
следить за текущими событиями;
управлять деньгами;
делать покупки;
искать интересующую информацию;
поддерживать связь с друзьями и семьей.
Участники исследования Nielsen Norman group положительно отзывались о появлении интернета в их жизни. Один 87-летний респондент сказал: «Выход в интернет заставил меня почувствовать себя намного более независимым».
С 2011 по 2016 год количество владельцев смартфонов среди людей старше 65 лет увеличилось в четыре раза.
Проблемы юзабилити для пожилых
1. Мелкий кегль. Отметим, что размер кегля зависит от гарнитуры. Некоторые из них сами по себе крупные, какие-то — поменьше. Например, Asos использует Futura PT. 14 кегль Futura PT выглядит как 10 кегль Roboto.
К слову, мелкие буквы в тексте отталкивают не только старшее поколение — подростки не любят их так же сильно. Причиной тому ранние проблемы со зрением из-за плохой осанки.
2. Низкая контрастность текста. Прежде, чем вы решите использовать светло-серый текст на белом фоне, посмотрите на себя в зеркало и спросите, зачем. Если вы пытаетесь уменьшить заметность одного элемента, чтобы сместить фокус на другие — есть способы лучше.
3. Иконки с непонятными значениями. Человеку без бэкграунда в цифровой среде потребуется время, чтобы понять, что всё это значит.
4. Отсутствие гибкости. В интерфейсе должно быть место для ошибок пользователей, особенно, когда речь о возрастной аудитории. Сайты и приложения, которые позволяют вводить данные только в одном формате, разочаровывают юзеров. Сюда же относится способность распознавать опечатки.
5. Плохой UX-копирайтинг. Сюда относятся сообщения об ошибках с непонятными формулировками и невнятный текст в навигации. Ещё одна проблема — незаметное размещение оповещения на экране среди множества других элементов интерфейса.
Рекомендации по дизайну
Используйте размер кегля от 14pt. Расстояние, на котором мы можем читать буквы, влияет на скорость чтения. Такой кегль позволит комфортно изучать информацию. Помните: если человеку нужно щуриться или наклоняться ближе, чтобы прочитать текст — он этого делать не станет.
Обеспечьте высокий контраст между текстом и фоном. Предпочтительно использовать чистый фон вместо текстурированного. Фон с паттерном мешает распознавать мелкие детали в тексте.
Когда информацию трудно расшифровать, читатели вынуждены выбирать: напрягать глаза или пропустить контент. Уже догадываетесь, какое решение они примут?
Расширение браузера Chrome Color Contrast Analyzer от NCSU покажет, какой фон подходит для наложения текста.
В Figma проверить коэффициент контрастности можно с помощью плагина Color Contrast Checker.
Контрастность — это отношение яркости элемента к яркости фона. Она измеряется в диапазоне от 1:1 (минимальная контрастность — белый текст на белом фоне) до 21:1 (максимальная контрастность — черный текст на белом фоне).
Требования к контрастности описаны в рекомендациях по доступности вебконтента (WCAG). В них предлагают уровни поддержки AAA, AA, AAA Large и AA Large.
AAA и AA — для небольших шрифтов (меньше 14pt для жирных и 18pt для обычных)
AAA Large и AA Large для заголовков (больше 14pt для жирных и 18pt для обычных).
Какие коэффициент контрастности рекомендуют
AAA — 7:1
AAA Large — 4,5:1
AA — 4,5:1
AA Large — 3:1
Поддержка AAA-стандарта нужна для людей с умеренно сниженным зрением, а АА-стандарта — для людей со зрением ниже среднего.
Чем проще шрифт — тем лучше. Избегайте гарнитур с декоративными элементами, засечками и шрифтов странной формы. Например, имитирующих почерк или готический стиль. Они ухудшают читаемость.
1. Мелкий кегль. Отметим, что размер кегля зависит от гарнитуры. Некоторые из них сами по себе крупные, какие-то — поменьше. Например, Asos использует Futura PT. 14 кегль Futura PT выглядит как 10 кегль Roboto.
К слову, мелкие буквы в тексте отталкивают не только старшее поколение — подростки не любят их так же сильно. Причиной тому ранние проблемы со зрением из-за плохой осанки.
2. Низкая контрастность текста. Прежде, чем вы решите использовать светло-серый текст на белом фоне, посмотрите на себя в зеркало и спросите, зачем. Если вы пытаетесь уменьшить заметность одного элемента, чтобы сместить фокус на другие — есть способы лучше.
3. Иконки с непонятными значениями. Человеку без бэкграунда в цифровой среде потребуется время, чтобы понять, что всё это значит.
4. Отсутствие гибкости. В интерфейсе должно быть место для ошибок пользователей, особенно, когда речь о возрастной аудитории. Сайты и приложения, которые позволяют вводить данные только в одном формате, разочаровывают юзеров. Сюда же относится способность распознавать опечатки.
5. Плохой UX-копирайтинг. Сюда относятся сообщения об ошибках с непонятными формулировками и невнятный текст в навигации. Ещё одна проблема — незаметное размещение оповещения на экране среди множества других элементов интерфейса.
Рекомендации по дизайну
Используйте размер кегля от 14pt. Расстояние, на котором мы можем читать буквы, влияет на скорость чтения. Такой кегль позволит комфортно изучать информацию. Помните: если человеку нужно щуриться или наклоняться ближе, чтобы прочитать текст — он этого делать не станет.
Обеспечьте высокий контраст между текстом и фоном. Предпочтительно использовать чистый фон вместо текстурированного. Фон с паттерном мешает распознавать мелкие детали в тексте.
Когда информацию трудно расшифровать, читатели вынуждены выбирать: напрягать глаза или пропустить контент. Уже догадываетесь, какое решение они примут?
Расширение браузера Chrome Color Contrast Analyzer от NCSU покажет, какой фон подходит для наложения текста.
В Figma проверить коэффициент контрастности можно с помощью плагина Color Contrast Checker.
Контрастность — это отношение яркости элемента к яркости фона. Она измеряется в диапазоне от 1:1 (минимальная контрастность — белый текст на белом фоне) до 21:1 (максимальная контрастность — черный текст на белом фоне).
Требования к контрастности описаны в рекомендациях по доступности вебконтента (WCAG). В них предлагают уровни поддержки AAA, AA, AAA Large и AA Large.
AAA и AA — для небольших шрифтов (меньше 14pt для жирных и 18pt для обычных)
AAA Large и AA Large для заголовков (больше 14pt для жирных и 18pt для обычных).
Какие коэффициент контрастности рекомендуют
AAA — 7:1
AAA Large — 4,5:1
AA — 4,5:1
AA Large — 3:1
Поддержка AAA-стандарта нужна для людей с умеренно сниженным зрением, а АА-стандарта — для людей со зрением ниже среднего.
Чем проще шрифт — тем лучше. Избегайте гарнитур с декоративными элементами, засечками и шрифтов странной формы. Например, имитирующих почерк или готический стиль. Они ухудшают читаемость.
Симулятор плохого зрения
NoCoffee Vision Simulator можно использовать для имитации нарушений зрения, в том числе разных форм дальтонизма.
Что ещё учесть
уменьшите расстояние между последовательными элементами интерфейса. Например, полями формы. Убедитесь, что они находятся на расстоянии не менее 2 миллиметров друг от друга;
основные кнопки на сенсорных интерфейсах должны быть не менее 44×44 px;
элементы интерфейса, которые нужно щёлкать мышью, должны быть не менее 11 миллиметров по диагонали. Всегда делайте область нажатия больше самой кнопки или гиперссылки.
Что-то с памятью моей стало
Кратковременная, эпизодическая и рабочая память особенно уязвимы с возрастом. Это значит, что пожилым людям сложнее понимать сценарии взаимодействия в цифровых продуктах.
Перспективная память (воспоминание, что нужно сделать в будущем) также страдает.
Что делать
постепенно вводите функции продукта, чтобы предотвратить умственную перегрузку;
избегайте разделения задач на несколько экранов, если они требуют запоминания предыдущих действий;
во время длительных задач давайте чёткую обратную связь о прогрессе.
К слову, эти рекомендации подойдут и в работе с молодой аудиторией. Особенно, если она не очень лояльна к вашему проекту.
Дизайн иконок
Опытные пользователи узнают иконки дома, печати и увеличительного стекла для поиска. Вне этих примеров большинство значков неоднозначны из-за разного контекста в интерфейсах. Люди, которые только попали в цифровую среду, тем более ничего не поймут.
Чтобы подсказать значение иконки стоит внедрить текстовые метки. Они должны быть видны всегда, даже без участия юзера.
Особенно это важно для значков навигации. Не полагайтесь на наведение, чтобы показать пояснения.
Во-первых, на сенсорном экране такую механику будет сложно реализовать.
Во-вторых, человеку придётся приложить больше умственных и физических усилий, чтобы достигнуть цели. Как однажды сказал дизайнер и консультант по юзабилити Брюс Тоньяццини: «Слово стоит тысячи картинок».
1. Сохраняйте дизайн простым и схематичным. Меньше графических деталей — их всё равно не распознают в маленьком значке.
2. Используйте правило пяти секунд. Если вы тратите больше 5 секунд, чтобы придумать иконку — она не передаст суть.
3. Проверьте значки на узнаваемость: спросите людей, что они ожидают от взаимодействия с ними.
4. Проверьте значки на запоминаемость: посмотрите, вспомнит ли целевая аудитория их значение через две недели после контакта.
NoCoffee Vision Simulator можно использовать для имитации нарушений зрения, в том числе разных форм дальтонизма.
Что ещё учесть
уменьшите расстояние между последовательными элементами интерфейса. Например, полями формы. Убедитесь, что они находятся на расстоянии не менее 2 миллиметров друг от друга;
основные кнопки на сенсорных интерфейсах должны быть не менее 44×44 px;
элементы интерфейса, которые нужно щёлкать мышью, должны быть не менее 11 миллиметров по диагонали. Всегда делайте область нажатия больше самой кнопки или гиперссылки.
Что-то с памятью моей стало
Кратковременная, эпизодическая и рабочая память особенно уязвимы с возрастом. Это значит, что пожилым людям сложнее понимать сценарии взаимодействия в цифровых продуктах.
Перспективная память (воспоминание, что нужно сделать в будущем) также страдает.
Что делать
постепенно вводите функции продукта, чтобы предотвратить умственную перегрузку;
избегайте разделения задач на несколько экранов, если они требуют запоминания предыдущих действий;
во время длительных задач давайте чёткую обратную связь о прогрессе.
К слову, эти рекомендации подойдут и в работе с молодой аудиторией. Особенно, если она не очень лояльна к вашему проекту.
Дизайн иконок
Опытные пользователи узнают иконки дома, печати и увеличительного стекла для поиска. Вне этих примеров большинство значков неоднозначны из-за разного контекста в интерфейсах. Люди, которые только попали в цифровую среду, тем более ничего не поймут.
Чтобы подсказать значение иконки стоит внедрить текстовые метки. Они должны быть видны всегда, даже без участия юзера.
Особенно это важно для значков навигации. Не полагайтесь на наведение, чтобы показать пояснения.
Во-первых, на сенсорном экране такую механику будет сложно реализовать.
Во-вторых, человеку придётся приложить больше умственных и физических усилий, чтобы достигнуть цели. Как однажды сказал дизайнер и консультант по юзабилити Брюс Тоньяццини: «Слово стоит тысячи картинок».
1. Сохраняйте дизайн простым и схематичным. Меньше графических деталей — их всё равно не распознают в маленьком значке.
2. Используйте правило пяти секунд. Если вы тратите больше 5 секунд, чтобы придумать иконку — она не передаст суть.
3. Проверьте значки на узнаваемость: спросите людей, что они ожидают от взаимодействия с ними.
4. Проверьте значки на запоминаемость: посмотрите, вспомнит ли целевая аудитория их значение через две недели после контакта.
Сообщения об ошибке
У пожилых людей часто возникают проблемы с чтением сообщений об ошибках. Они не понимают формулировок, либо просто не знают причины сбоя. Здесь простота становится даже более важной, чем обычно.
Сообщение об ошибке должно включать:
1. Явное указание на то, что что-то пошло не так. Когда пользователи ошибаются и не получают обратной связи, они полностью теряются. Точно опишите проблему.
2. Понятный язык вместо отраслевых терминов вроде «произошла ошибка класса 2».
3. Вежливую фразу, которая не обвиняет пользователей и не подразумевает, что они глупы.
4. Конструктивный совет, как исправить проблему. Например, проверить опечатку, посмотреть рекомендации в файле или перезагрузить страницу.
Наиболее частое оповещение в интернете «404 not found» нарушает большинство этих рекомендаций. Лучше написать собственное сообщение об ошибке.
5. Не используйте только красный цвет для обозначения ошибок. Включайте дополнительные подсказки, которые могут видеть дальтоники.
6. Сохраните как можно больше работы пользователя. Позвольте человеку редактировать исходное действие, а не делать все заново. Если посетитель ввёл хоть какую-то информацию, даже без ошибки мы должны её использовать заново во всех доступных сценариях. Это часть принципа «пусть потеет машина».
7. Сократите работу по исправлению ошибки. Если возможно, угадывайте правильное действие и дайте пользователям выбрать его из небольшого списка исправлений. Например, вместо того, чтобы просто сказать «город и почтовый индекс не совпадают», дайте посетителю выбрать город, который соответствует введенному им почтовому индексу.
Выводы
Мы зачерпнули каплю в море, но даже эти рекомендации способны улучшить жизнь людям в интернете. Адаптируя интерфейс под пожилых, мы делаем его удобнее для всех.
Для тех, кто пролистал в самый низ:
используйте шрифт от 14 пунктов. Это порадует не только взрослое поколение, но и подростков;
старайтесь писать текст на «чистом» фоне и всегда проверяйте уровень контрастности;
избегайте шрифтов с необычным начертанием. Чем проще гарнитура — тем лучше;
избегайте разделения задач на несколько экранов, если они требуют запоминания предыдущих действий. Во время длительных задач давайте чёткую обратную связь о прогрессе;
делайте текстовые обозначения иконок — не заставляйте неопытных пользователей гадать;
в сообщении об ошибке дайте рекомендации, как её исправить.
Источник
У пожилых людей часто возникают проблемы с чтением сообщений об ошибках. Они не понимают формулировок, либо просто не знают причины сбоя. Здесь простота становится даже более важной, чем обычно.
Сообщение об ошибке должно включать:
1. Явное указание на то, что что-то пошло не так. Когда пользователи ошибаются и не получают обратной связи, они полностью теряются. Точно опишите проблему.
2. Понятный язык вместо отраслевых терминов вроде «произошла ошибка класса 2».
3. Вежливую фразу, которая не обвиняет пользователей и не подразумевает, что они глупы.
4. Конструктивный совет, как исправить проблему. Например, проверить опечатку, посмотреть рекомендации в файле или перезагрузить страницу.
Наиболее частое оповещение в интернете «404 not found» нарушает большинство этих рекомендаций. Лучше написать собственное сообщение об ошибке.
5. Не используйте только красный цвет для обозначения ошибок. Включайте дополнительные подсказки, которые могут видеть дальтоники.
6. Сохраните как можно больше работы пользователя. Позвольте человеку редактировать исходное действие, а не делать все заново. Если посетитель ввёл хоть какую-то информацию, даже без ошибки мы должны её использовать заново во всех доступных сценариях. Это часть принципа «пусть потеет машина».
7. Сократите работу по исправлению ошибки. Если возможно, угадывайте правильное действие и дайте пользователям выбрать его из небольшого списка исправлений. Например, вместо того, чтобы просто сказать «город и почтовый индекс не совпадают», дайте посетителю выбрать город, который соответствует введенному им почтовому индексу.
Выводы
Мы зачерпнули каплю в море, но даже эти рекомендации способны улучшить жизнь людям в интернете. Адаптируя интерфейс под пожилых, мы делаем его удобнее для всех.
Для тех, кто пролистал в самый низ:
используйте шрифт от 14 пунктов. Это порадует не только взрослое поколение, но и подростков;
старайтесь писать текст на «чистом» фоне и всегда проверяйте уровень контрастности;
избегайте шрифтов с необычным начертанием. Чем проще гарнитура — тем лучше;
избегайте разделения задач на несколько экранов, если они требуют запоминания предыдущих действий. Во время длительных задач давайте чёткую обратную связь о прогрессе;
делайте текстовые обозначения иконок — не заставляйте неопытных пользователей гадать;
в сообщении об ошибке дайте рекомендации, как её исправить.
Источник
vc.ru
Доступный дизайн: как сделать интерфейс удобным для пожилых — Дизайн на vc.ru
Мы в Mojo решили напомнить, что дизайн не только решает коммерческие задачи, но и делает жизнь людей комфортнее. UX — концепция, которая основана на идее качества и удобства, и перед ней все должны быть равны.
Когнитивная перегрузка на экране вашего смартфона
Как иконки приложений борются за ваше внимания.
Недавний редизайн иконок приложений Google стал причиной дискуссии о будущем иконок цифровых продуктов.
Иконки приложений должны быть ярче и красочнее, насколько это возможно. Они практически прыгают на вас с экранов устройств. Компании не могут позволить, чтобы их продукты редко использовались или оставались незамеченными, что провоцирует жесткую конкуренцию за внимание пользователя.
Минимализм? Нет. Скевоморфизм? Нет, спасибо!
Было время, когда в моде были супер-минималистичные логотипы на основе шрифтов. Белая фигура на черном фоне часто говорила о роскоши и статусе. Но те времена прошли, и нас бомбардируют в попытках превзойти конкурентов.
Больше цветов!
Больше градиентов!
Всего побольше!
Читать статью: https://ux.pub/editorial/koghnitivnaia-pierieghruzka-na-ekranie-vashiegho-smartfona-3gk9
Как иконки приложений борются за ваше внимания.
Недавний редизайн иконок приложений Google стал причиной дискуссии о будущем иконок цифровых продуктов.
Иконки приложений должны быть ярче и красочнее, насколько это возможно. Они практически прыгают на вас с экранов устройств. Компании не могут позволить, чтобы их продукты редко использовались или оставались незамеченными, что провоцирует жесткую конкуренцию за внимание пользователя.
Минимализм? Нет. Скевоморфизм? Нет, спасибо!
Было время, когда в моде были супер-минималистичные логотипы на основе шрифтов. Белая фигура на черном фоне часто говорила о роскоши и статусе. Но те времена прошли, и нас бомбардируют в попытках превзойти конкурентов.
Больше цветов!
Больше градиентов!
Всего побольше!
Читать статью: https://ux.pub/editorial/koghnitivnaia-pierieghruzka-na-ekranie-vashiegho-smartfona-3gk9
UXPUB 🇺🇦 Дизайн-спільнота
Когнитивная перегрузка на экране вашего смартфона
Компании не могут позволить, чтобы их продукты редко использовались или оставались незамеченными, что провоцирует жесткую конкуренцию за внимание пользователя
Мы отошли от плоского дизайна. В каком направлении мы двигаемся дальше?
Эволюция современных языков дизайна и что мы будем делать дальше.
Революция плоского дизайна, которая характеризовала большую часть 2010-х годов, вроде как закончилась. Проведя годы с радикально плоскими интерфейсами, которые полностью избегали имитации реальных объектов, мы начали замечать обратный процесс – языки дизайна, использующие метафоры реального мира. Сегодня наши интерфейсы по-прежнему обладают многими отличительными чертами плоского дизайна. По-прежнему делается упор на типографику, минимализм и контент, а не на лоск интерфейса. Однако мы также стали замечать повторное введение определенных концепций реального мира, прежде всего света, поскольку он связан с тенями и тем, как объекты взаимодействуют друг с другом в трехмерной плоскости.
Может показаться, что мы просто возвращаемся к скевоморфизму, но нужно признать – это скорее эволюция плоского дизайна, чем возвращение к скевоморфизму. Это можно увидеть по тому, как языки плоского дизайна развивались с течением времени и как они пришли к текущему состоянию.
Читать статью: https://ux.pub/editorial/my-otoshli-ot-ploskogho-dizaina-v-kakom-napravlienii-my-dvighaiemsia-dalshie-1f9
Эволюция современных языков дизайна и что мы будем делать дальше.
Революция плоского дизайна, которая характеризовала большую часть 2010-х годов, вроде как закончилась. Проведя годы с радикально плоскими интерфейсами, которые полностью избегали имитации реальных объектов, мы начали замечать обратный процесс – языки дизайна, использующие метафоры реального мира. Сегодня наши интерфейсы по-прежнему обладают многими отличительными чертами плоского дизайна. По-прежнему делается упор на типографику, минимализм и контент, а не на лоск интерфейса. Однако мы также стали замечать повторное введение определенных концепций реального мира, прежде всего света, поскольку он связан с тенями и тем, как объекты взаимодействуют друг с другом в трехмерной плоскости.
Может показаться, что мы просто возвращаемся к скевоморфизму, но нужно признать – это скорее эволюция плоского дизайна, чем возвращение к скевоморфизму. Это можно увидеть по тому, как языки плоского дизайна развивались с течением времени и как они пришли к текущему состоянию.
Читать статью: https://ux.pub/editorial/my-otoshli-ot-ploskogho-dizaina-v-kakom-napravlienii-my-dvighaiemsia-dalshie-1f9
UXPUB 🇺🇦 Дизайн-спільнота
Мы отошли от плоского дизайна. В каком направлении мы двигаемся дальше?
Может показаться, что мы просто возвращаемся к скевоморфизму, но нужно признать – это скорее эволюция плоского дизайна, чем возвращение к скевоморфизму
Про хороший и плохой дизайн для недизайнеров
Автор статьи часто сталкивается с нарушением UX-принципов в продуктах, поэтому хочет помочь менеджерам, начинающим дизайнерам и программистам освоить базовые принципы юзабилити, а также научиться распознавать распространённые ошибки.
Читать: https://habr.com/ru/company/arcadia/blog/525144/
Автор статьи часто сталкивается с нарушением UX-принципов в продуктах, поэтому хочет помочь менеджерам, начинающим дизайнерам и программистам освоить базовые принципы юзабилити, а также научиться распознавать распространённые ошибки.
Читать: https://habr.com/ru/company/arcadia/blog/525144/
Хабр
Про хороший и плохой дизайн для недизайнеров
Здравствуйте, меня зовут Анастасия Степанова, я дизайнер в Аркадии с опытом работы более 4 лет. Пришла в компанию в 2017 году в проект по разработке платформы для дистанционного обучения. Я часто...