UI/UX-дизайн
Исследование пользователей, вайрфреймы, кликабельные прототипы и дизайн-система для софта, в который люди входят по логину, созданные на арабском и английском и проверенные по WCAG 2.2.
Что охватывает эта услуга
Дизайн интерфейсов в Дубае создаётся для софта с задачами внутри: приложения для бронирований, клиентского портала, приложения для родителей в школе, панели управления недвижимостью, платёжного сценария. Вопрос не в том, «хорошо ли это выглядит», а в том, «сможет ли занятой человек в Дубае завершить эту задачу на телефоне, не звоня в поддержку». Маркетинговый сайт представляет собой другую задачу, её охватывает веб-дизайн.
Кто пользуется продуктом, чего эти люди хотят добиться и где сегодня застревают.
Сценарии и макеты экранов в оттенках серого, чтобы структура была согласована до оформления.
Кликабельные версии, ведущие себя как настоящий продукт, используемые для тестирования и утверждения.
Переиспользуемые компоненты, токены и правила, чтобы разработчики строили единообразно, а новые экраны создавались быстро.
Исследование
Дизайн интерфейсов в Дубае не требует, чтобы исследование было трёхмесячным изучением. Оно должно отвечать на вопросы, ошибиться в которых будет дорого. Для продукта ОАЭ это обычно означает понимание смешанной аудитории: арабо- и англоязычных, резидентов и приезжих, людей, пользующихся приложением ежедневно, и тех, кто открывает его дважды в год, чтобы что-то продлить.
Мы выбираем методы исходя из того, что уже известно. У существующего продукта есть аналитика и обращения в поддержку, показывающие, где люди спотыкаются. У нового продукта есть конкуренты и несколько реальных потенциальных пользователей, которых можно опросить за неделю. Если ваша аналитика не настроена показывать это, сначала это можно исправить с помощью веб-аналитики.
Вайрфреймы и прототипы
Каждый этап даёт что-то, на что можно отреагировать. Изменение сценария в вайрфрейме занимает минуты, изменение после разработки занимает целый спринт.
Каждый путь через задачу, включая неудачные варианты: неверный пароль, истёкшее Emirates ID, отклонённый платёж, отсутствие интернета на парковке.
Макеты экранов с низкой детализацией, определяющие, какую информацию и действия несёт каждый экран, сначала в размере телефона для мобильных продуктов.
Вайрфреймы или оформленные экраны, связанные между собой, чтобы люди могли пройти задачу тапами. Мы используем его для тестирования с пользователями и для получения утверждения от заинтересованных сторон, которым сложно читать вайрфреймы.
Несколько человек из целевой аудитории пытаются выполнить реальные задачи, пока мы наблюдаем. Проблемы, возникающие повторно, исправляются до финализации визуального дизайна.
Финальные экраны на обоих языках, с состояниями загрузки, пустоты, ошибки и успеха для каждого компонента.
Дизайн-системы
Дизайн интерфейсов в Дубае страдает первым: как только продукт перерастает несколько десятков экранов, единообразие рассыпается без системы. Кнопки расползаются в размерах, отступы становятся произвольными, а каждый разработчик придумывает своё сообщение об ошибке. Дизайн-система устраняет это с помощью именованных токенов цвета, типографики и отступов, библиотеки компонентов с прорисованным каждым состоянием и коротких правил, когда какой использовать.
Дизайн интерфейсов в Дубае для продукта на арабском и английском проектирует каждый компонент в обоих направлениях. Иконки, указывающие направление, зеркалируются, поля ввода выравниваются по стороне чтения, а числовые поля остаются слева направо.
Если вы работаете с федеральными государственными структурами ОАЭ, учтите, что Регуляторное управление по телекоммуникациям и цифровому правительству публикует дизайн-систему ОАЭ для федеральных государственных сайтов и приложений. TDRA описывает свои компоненты как протестированные на соответствие рекомендациям WCAG 2.2. Там, где проект обязан её соблюдать, мы проектируем внутри неё, а не в обход.
WCAG 2.2
W3C впервые опубликовал WCAG 2.2 как рекомендацию в октябре 2023 года, а текущая версия датирована декабрём 2024 года. Дизайн интерфейсов в Дубае теперь опирается на неё: в неё добавлены критерии успеха, напрямую влияющие на дизайн приложений и порталов, и мы проектируем по уровню AA, если ваш бриф не задаёт другую цель.
| Критерий WCAG 2.2 | Уровень | Что это меняет в дизайне продукта |
|---|---|---|
| 2.4.11 Фокус не скрыт (минимум) | AA | Закреплённые заголовки, баннеры cookie и кнопки чата не должны скрывать элемент, на который переместился пользователь клавиатуры. |
| 2.5.7 Перетаскивающие движения | AA | Всё, что делается перетаскиванием, например переупорядочивание или слайдер, также нуждается в альтернативе одним тапом или кликом. |
| 2.5.8 Размер цели (минимум) | AA | Целевые области указателя не менее 24 на 24 CSS-пикселя, с перечисленными исключениями, такими как достаточные отступы или встроенные текстовые ссылки. |
| 3.2.6 Единообразная помощь | A | Варианты помощи, такие как контактные данные или чат, находятся в одном и том же месте на всех экранах. |
| 3.3.7 Избыточный ввод | A | Информация, уже введённая в процессе, заполняется автоматически или доступна для выбора, а не набирается заново. |
| 3.3.8 Доступная аутентификация (минимум) | AA | Вход не опирается на тест на запоминание или головоломку без альтернативы, поэтому вставка паролей и менеджеры паролей должны работать. |
О текстах внутри интерфейса см. UX-копирайтинг. О разработке см. разработку мобильных приложений или разработку сайтов. Все услуги дизайна перечислены в разделе услуги дизайна.
Избранные проекты
Веб-приложение для продажи билетов в кино, приложение для мероприятий и конференций и финтех-приложение, каждое с задачей, которая должна сработать с первого раза.
Веб-приложение · Билеты · ОАЭ
Сеть кинотеатров в ОАЭ под управлением Phars Film. Все сеансы, акции и оплаты в одном месте, удобном на телефоне.
starcinemas.ae
Мобильное приложение · События · ОАЭ
Платформа конференций в ОАЭ, заменяющая печатные программы и цепочки писем для участников и организаторов.
meecon.ae
Мобильное приложение · Финтех · США
Финтех-платформа, объединяющая продавцов, клиентов и благотворительные организации в едином платёжном процессе.
purposepayment.comИз блога
Что защищает и отклоняет закон ОАЭ о товарных знаках, как проходит регистрация в Министерстве экономики и туризма, и что это значит для вашего логотипа.
Читать статью
Что должен письменно закрепить брендбук на арабском и английском, чтобы типографии, разработчики и авторы в ОАЭ применяли его одинаково.
Читать статьюПрямые ответы
UX означает то, как работает продукт: сценарии, шаги, что происходит, когда что-то идёт не так. UI означает то, как выглядит и реагирует каждый экран. Их создают вместе, но решения по UX принимаются в первую очередь.
Да. Целевой разбор сценариев с наибольшим оттоком, за которым следует редизайн экранов только для этих сценариев, часто становится лучшим первым шагом. Результаты покажут, оправдан ли более масштабный редизайн.
По числу пользовательских сценариев и экранов, задействованным платформам, глубине исследования и тому, входит ли дизайн-система в объём работ. Вы получаете письменную смету с фиксированной ценой по вашему брифу до начала работы.
Да. Наша команда разрабатывает веб- и мобильные приложения, и вы утверждаете дизайн до начала разработки. Дизайн можно точно так же передать вашим собственным разработчикам.
Кнопки, сообщения об ошибках и пустые состояния входят в пользовательский опыт, поэтому они прорабатываются во время дизайна. Для крупных продуктов этим занимается наша услуга UX-копирайтинга на арабском и английском.
Источники
Фиксированная цена в письменном виде
Получили. Мы уже готовим ваше предложение.
В рабочее время вы получите его в течение 45 минут. Проверьте почту, там письмо с подтверждением.
