Дизайн приложений: Как создать дизайн для мобильных приложений

Содержание

10 интересных трендов в дизайне мобильных приложений / Хабр

Благодаря развитию мобильных приложений – от Uber до Vine – мы постепенно начинаем понимать, как тренды в дизайне программ обретали форму в течение половины десятилетия. Многие факторы влияют на то, как в определенный отрезок времени выглядят мобильные приложения: от таких социальных трендов, как «экономика взаимопомощи», до изменений в технологиях – в этом году, например, мы видим огромные экраны телефонов в сочетании с крошечными носимыми аксессуарами.

Чем больше пользователи используют мобильные технологии в их повседневной жизни, тем больше они думают о приложениях, которыми пользуются. Проверяя почту, бронируя номер в отеле, заказывая безглютеновую пиццу с доставкой на дом. Такие приложения, как Airbnb и GrubHub выделяются из общей массы и минимизируют количество мыслей, направленных на их использование. Поэтому пользователи могут совмещать работу в приложении с чем-то еще и не тратить время на обдумывание того, как найти функции, которые им необходимы. Чем больше дел одновременно выполняют пользователи, тем больше им необходимы мобильные приложения с дизайном, который отвечает их потребностям и дает им то, чего они желают – тогда, когда им это нужно.

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

1. Большие экраны телефонов

Нравится вам это или нет, но фаблеты требуют все больше полезной площади экрана. Что это означает для дизайнеров и разработчиков мобильных приложений?

Работая выше очевидного «большого дизайна», важно понять, как люди будут держать свои устройства во время их использования. Это значит, что в первую очередь элементы навигации должны быть расположены таким образом, чтобы человек легко мог дотянуться до них большим пальцем (например, верхний противоположный угол скорее всего будет слишком далеко). Несложно до этого додуматься, не так ли? Просто нужно расположить все интерактивные элементы справа в нижней части экрана. Только дело усложняет то, что около 10% пользователей являются левшами.

Вы можете «принудить» ваших пользователей-левшей к тому, чтобы держать экран двумя руками, но с учетом того, какими большими нынче становятся экраны мобильных устройств, более часто будет использоваться та рука, ближе к которой расположены элементы навигации. Или же, если вам действительно важно, чтобы ваше приложение было удобным для всех пользователей (а вам это важно), то вы проследите за соблюдением следующего условия: все элементы навигации должны быть достаточно велики, чтобы до них легко было дотянуться с любой стороны экрана. Кроме того, у вас действительно появилось больше полезной площади экрана, с которой и нужно работать. Другая идея заключается в использовании настраиваемого интерфейса с возможностью «перевернуть» его для левшей.

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

Конечно же, работая над приложениями для больших экранов, нужно помнить о следующем:

2. Свайп – новое нажатие

Когда появились первые мобильные приложения, адаптированные под тачскрины, дизайнерам и разработчикам пришлось столкнуться с реальностью программирования для объекта, значительно отличающегося от предыдущих видов. Зумирование в первом iPhone образца 2007 года было для нас необычной новинкой, но дизайн приложения, в котором пользователю приходится зумировать страницу, чтобы иметь возможность прочитать контент, нельзя назвать удачным. Вместе с тем, кому из нас не довелось столкнуться с «противной» крошечной кнопкой, которая слишком мала, чтобы без проблем нажать ее (если только вы не обладатель редкой комбинации миниатюрных рук и отточенной моторики пианиста).

Пролистывающие движения кажутся более естественными при использовании мобильных устройств, особенно если вы делаете все одной рукой. Каковы тому доказательства? Представьте, что у вас в руке зажат телефон и попробуйте сделать большим пальцем нажатия на воображаемый экран. Запомните свои ощущения. Далее сделайте пролистывающее движение через экран. Что вам показалось более комфортным?

Конечно, наиболее очевидным примером применения свайпов в приложениях является Tinder, который упростил невероятно сложную природу знакомств до двух простых действий: пролистывания вправо и влево. За меньшее время, которое бы у вас занял просмотр какого-нибудь трейлера, вы можете отправить сигнал целой армии потенциальных кавалеров (или дам сердца) – одним только пролистывающим движением большого пальца на экране мобильного устройства. Кажется, что идеи Tinder его не подводят, о чем свидетельствуют более миллиарда пользователей приложения.

3. Носимые аксессуары обретают все большее влияние на дизайн приложений

Крохотные дисплеи умных часов являются противоположностью огромных экранов фаблетов. Аналитическая фирма International Data Corporation предсказывает, что вендоры за этот год обеспечат поставки 45,7 млн носимых устройств, в том числе и носимых на запястье гаджетов (они составляют наибольший процент от общего числа, их количество равно 40 млн), а также предметов одежды и очков.

Те устройства, которые изначально разрабатывались как гаджеты для фитнеса, теперь захватывают все большие рыночные территории с релизами Apple Watch и Android Wear. Носимые устройства – это больше не разрекламированные шагомеры с механизмами, следящими за пульсом и сном. Они и вправду стали надежными умными гаджетами, способными рассказать пользователю, как долго продлится поездка на работу, показать прогноз погоды на завтра или напомнить закипятить чайник к приходу тетушки. Как это влияет на работу дизайнеров мобильных приложений?

Мы все еще находимся на ранних стадиях развития этого растущего тренда, хотя Apple и Android уже предлагают ассортимент решений для носимых устройств. Как создатели похожих на часы устройств, оба бренда подчеркивают важность того, чтобы информация на них легко воспринималась с одного только беглого взгляда. В отличие от программ для телефонов и планшетов, на которые по ожиданиям разработчиков пользователи смотрят продолжительное время, приложения для носимых устройств должны иметь такой дизайн, который обеспечивал бы быстрое восприятие пользователем достаточного количества контента. Информация должна усваиваться с одного лишь взгляда, даже краешком глаза. А это означает, что шрифт, цветовой контраст и сопутствующие факторы (где находится пользователь? какие данные ему необходимы прямо сейчас?) особенно важны при дизайне и разработке приложений для носимых устройств.

И поскольку технология эта достаточно новая, невероятно важно обращать внимание на отзывы и пожелания пользователей и работать над будущими обновлениями. И пока Apple и Android могут делать предположения по поводу будущего облика мобильных приложений для носимых устройств, именно пользователи станут теми, кто на самом деле определит их дизайн.

4. Многослойные макеты

Может ли вечная дискуссия по поводу того, что лучше – плоский дизайн и скевоморфизм – окончиться находкой чего-то среднего? Противники скевоморфизма утверждают, что на эстетическом уровне использование блеклого подобия натуральных текстур в контексте современных IT-технологий выглядит также безвкусно, как и попытка имитации дерева на приборной панели автомобиля. Но даже несмотря на признание ценителей эстетики в мире IT, и у плоского дизайна есть свои минусы. Если убрать текстуру со всех элементов дизайна мобильного приложения, то трудно будет определить, какие из них интерактивны, если вообще удастся различить границы между разными элементами интерфейса.

Компромиссом является многослойный плоский дизайн или то, что Google называет «материальным дизайном». Эта эстетика все еще сильно опирается на плоский дизайн, но некоторые ее принципы заимствованы из скевоморфизма. Как и с плоским дизайном, элементы многослойного или материального дизайна геометрические по своей природе, заполнены «монолитными» цветами нежели выполнены с имитацией природных текстур или банальным блеском, или сиянием. Но из скевоморфизма были позаимствованы метафоры из мира природы, особенно в том, как объекты взаимодействуют друг с другом. Это видно в тенях и других световых эффектах фона.

Принципы Google Material Design

В результате слияния плоского дизайна с натуральной физикой пользователи могут с большей легкостью интуитивно разобраться, как работают элементы на экране. Когда вы манипулируете объектами на вашем устройстве, они обладают массой и инертностью. Может создаваться впечатление, что у них есть масса, когда вы передвигаете их по экрану, или когда они отбрасывают тени на элементы, находящиеся за ними. Это сочетание удобства в использовании скевоморфизма и эстетики плоского дизайна создает элегантный облик приложений, порождая позитивный пользовательский опыт.

5. Больше движения

Ваш смартфон обладает большей производительностью, чем оборудование, благодаря которому НАСА удалось отправить первого человека на луну, равно как и суперкомпьютер Deep Blue, который в 1997 году обыграл Гарри Каспарова в шахматы. И мобильные устройства становятся все умнее и умнее. И не только мобильные устройства становятся более мощными, но с приходом трех типов 4G (каждый пытается пересилить другого в мощности и скорости) на замену 3G, у вас появляется больше свободы для того, чтобы анимировать дизайн вашего мобильного приложения.

TimeLine Page, автор Сергей Валюх

Анимация предлагает много преимуществ для дизайна мобильных приложений. Она может поспособствовать привлечению внимания пользователя к определенному объекту, привести его к необходимому действию или просто создать более приятный и удивительный пользовательский опыт. В настоящее время смартфоны уже достаточно продвинуты, а их сети обладают достаточной мощностью для того, чтобы переварить анимацию HTML5 или параллакс-эффектов, которые вы уже используете на своем компьютере. В этом году мы наблюдаем за тем, как в дизайне мобильных приложений появилось больше движущихся элементов, что оказывает меньшее влияние на скорость сигнала и мощность устройств, нежели раньше. И это еще только цветочки, ведь смартфоны становятся все умнее.

6. Простые мягкие цветовые гаммы

Для каждого года характерно собственная цветовая палитра, и сейчас мы отдаем предпочтение очень простым гаммам цветов, которые отличаются мягким контрастом. Это естественное последствие вездесущего минимализма и плоского дизайна мобильных приложений. Тем не менее, цвета подбираются с учетом актуальных трендов (в цветовой палитре Pantone Spring 2015 предпочтение отдано «более холодным и мягким решениям с нежными теплыми тонами»). Попробуйте использовать шаблон с различными оттенками одного цвета, с белым шрифтом и контрастными элементами. Или попробуйте шаблон только с двумя-тремя приглушенными тонами.

В контексте простого дизайна мобильных приложений выбор отдается менее рассеянному опыту, при котором резкий цветовой контраст требует большего внимания от глаза. При длительном созерцании светящегося экрана глаза вряд ли скажут вам «спасибо», но приглушенные тона и смягченное свечение (опять же, это сильные стороны плоского дизайна) делают внешний вид мобильного приложения более приятным и завершенным.

7. На сцену выходит текстовое оформление

Кажется, что еще совсем недавно шрифты в мобильных приложениях были представлены только безопасными веб-шрифтами, которые можно было прочесть на экранах с малым разрешением. В течение последних двух лет в iOS и Android происходила оптимизация операционных систем для более динамичных, масштабируемых и читаемых шрифтов. Еще одним побочным эффектом больших экранов и технологических инноваций (спасибо тебе, TypeKit) является использование шрифтов для добавления красоты и выразительности дизайну ваших мобильных приложений. Независимо от того, сопутствует вашему тексту огромное модное изображение на заднем плане или же он окружен негативным пространством, мы можете использовать шрифт для донесения вашей идеи мощным минималистичным способом.

Приложение Wild Canada для iOS, автор Маршалл Лоренцо (Marshall Lorenzo).

8. Встроенное размытие

Одним из трендов в дизайне мобильных приложений является размытие заднего плана, которое добавляет удобства использования «полупрозрачных» приложений. И несмотря на то, что мобильные приложения, которые закрывают собой пользовательский интерфейс, имеют чистый и целостный облик, они все же могут вызывать проблемы с юзабилити.

Пользовательский интерфейс (UI) «Погода», автор Натан Смит (Nathan Smith).

В зависимости от выбранного пользователями фонового изображения для мобильных устройств, а также от количества иконок и виджетов отсутствие прозрачности может сделать ваше приложение более трудным для восприятия. Использование эффекта размытия Gaussian blur в дизайне программы сделает ее более понятной и приятной для глаз, сохраняя при этом «звучание» пользовательского интерфейса.

9. Инновации в удобном дизайне мобильных приложений

В качестве бонуса мы получаем то, что современные тренды дизайна фактически делают приложения более удобными в использовании. Простые слои с огромными элементами и шрифтами требуют меньше усилий зрительного аппарата, в то время как широкие движения руки (свайпы) противоположны жестам, которые требуют более отработанной моторики (зумирование двумя пальцами, нажатие), и являются приемлемыми для людей с проблемами опорно-двигательного аппарата. Наряду с тем, что Typekit позволяет использовать более живой текст в дизайне мобильных приложений без приношения в жертву качества шрифтов, он также делает наши программы более простыми в использовании для людей с нарушениями зрения. Рост доступности девайсов с большими экранами и фаблетов способствовал тому, что дизайн мобильных приложения стал более удобным для большего числа людей.

Пример встроенного ПО для распознавания человеческой речи, который использует грамматику SRGS.

Помните, что создание удобного для пользователя дизайна мобильного приложения требует основательных размышлений о том, насколько ваш продукт понятен и прост в использовании для потребителя. Настраивается ли этот шаблон для кого-то, кому может потребоваться крупный и более разборчивый шрифт? Создание списка особенностей, повышающих удобство использования приложения, может быть неплохой идеей при работе над дизайном вашего продукта. The Accessibility Project предлагает огромное количество ресурсов для дизайнеров и разработчиков, которые помогут их продуктам стать доступными и удобными для большего количества пользователей.

10. Более мудрое создание прототипов

Каждое используемое нами приложение когда-то было прототипом. Многие экспериментальные прототипы начинались с простых набросков, распечатанных на нескольких листах бумаги или сохраненных в PDF. Теперь, когда дизайн мобильных приложений стал более сложным, недостаточно показать только несколько статичных макетов и заставить клиента (или разработчика) представить в ней предполагаемые движения. Если приложение богато анимацией для направления пользователя или привлечения интереса благодаря визуальным эффектам, ваш клиент не способен схватить всего, что должно сделать приложение интересным и удобным в использовании. К тому же плоские модели не создают достаточный «вау-эффект».

Приложение Spotify – прототип, созданный при помощи Proto.io.
Однако работа программистов при разработке экспериментального прототипа имеет и свой набор головных болей, потому что разработчикам приходится вовсю трудиться над элементами, которые могут и не появиться в финальном прототипе. Для того чтобы не тратить силы понапрасну, дизайнеры должны либо очень четко описать разработчикам свои идеи, либо взять в свои руки создание прототипа, чтобы он соответствовал их видению.

К счастью, в настоящее время существует достаточно решений для создания прототипов, так что дизайнером это по силам. С минимальными знаниями о написании кода или даже без них дизайнер может создать экспериментальный прототип, который показывает, как пользователь должен взаимодействовать с приложением. При этом можно создать необходимую для дизайна приложения анимацию. В результате этого вы не только получаете прототип, который поразит ваших потенциальных клиентов, но и облегчит процесс разработки приложения. Так как вы уже описали все детали, которые важны для работы приложения и его взаимодействия с пользователем, разработчикам остается заняться непосредственно созданием продукта, не тратя свое время и усилия на создание бесконечных версий дизайна.

10 универсальных правил для дизайна мобильных приложений | GeekBrains

Что стоит помнить дизайнеру.

https://d2xzmw6cctk25h.cloudfront.net/post/1509/og_cover_image/6e6c6d523fe45c706b24e7b2a0a1b94d

Благодаря мобильным приложениям офис, развлекательный центр, библиотека и супермаркет помещаются в кармане. Как выполнить дизайн приложения так, чтобы он радовал пользователя каждый день, рассказала преподаватель GeekBrains Алевтина Шаталова.

Следуйте гайдлайнам

Жизнь дизайнера мобильных приложений значительно проще, чем у коллег-«графиков». Все благодаря Apple и Google, которые выпустили набор рекомендаций Human Interface Guidelines и Material Design. Изучаем, руководствуемся!

Выражайте эмоции

Дизайн – это визуальная коммуникация, где диалог поддерживают графические объекты. Есть элементы, которые помогут передать настроение:

  • Текст – эпитеты, метафоры, ирония работают на выразительность.
  • Шрифт – у каждой гарнитуры свой характер. Используйте его, чтобы создать атмосферу.
  • Композиция – противостояние, динамику, статику, гармонию и целую палитру ощущений можно передать, по-разному сочетая объекты.
  • Цвет – практика показывает, что именно цвет – самый быстрый способ донести эмоцию, а цветовая кодировка запоминается пользователям лучше всего;
  • Фото – правильно подобранные фотографии станут ключом к целевой аудитории, заинтересуют пользователей и зададут эмоциональный тон.

Помогайте в решении задач

В отличие от искусства, дизайн существует в контексте задачи. У него две цели – одна ставится бизнесом, а другая – пользователем. Человек открывает приложение, чтобы решить свою проблему или найти ответ на вопрос. Помогите ему сделать это быстро и легко.

Используйте разумную навигацию

Мир ускоряется, и гаджетами мы пользуемся на ходу. Нужна простая и интуитивно понятная навигация. Для этого все методы хороши: можно использовать двойное описание (иконка + текст) в навигации, А/Б-тесты, пользовательский опыт платформ iOS и Android.

Рассказывайте о преимуществах

Пользователь может заранее не знать о том, насколько ваше приложение способно облегчить ему жизнь. Об этом стоит рассказать с помощью welcome-скринов.

C:\Documents and Settings\Admin\Рабочий стол\uberflash (Uber Design).gif

Помните об особенностях мобильных платформ

Палец – не курсор, поэтому отказываемся от десктопных вариантов мелких объектов. Можно заменить их достойной альтернативой – прокруткой с помощью жеста swype.

C:\Documents and Settings\Admin\Рабочий стол\uberflash (Uber Design).gif

Презентуйте работу

Правильная подача – половина дела. И дизайнер должен использовать в презентации лучшие средства визуального языка.

C:\Documents and Settings\Admin\Рабочий стол\uberflash (Uber Design).gif

Анимируйте правильно

Целесообразная анимация для каждого объекта, как и грамотная постановка хореографии всех графических элементов в приложении – «знак качества» в дизайне.

C:\Documents and Settings\Admin\Рабочий стол\uberflash (Uber Design).gif

Будьте внимательны к деталям

Минимализм, свойственный современному дизайну, коварен: он обнажает недостаток опыта у исполнителя. Поэтому каждая деталь требует особого внимания. Чтобы найти случайные, не органичные решения, посмотрите на каждый объект и задайте себе вопрос: «Почему он именно такой?» Если не найдется ответа по поводу формы, цвета, фактуры или положения – это случайный элемент, от которого нужно отказаться или лучше продумать его внешний вид.

C:\Documents and Settings\Admin\Рабочий стол\uberflash (Uber Design).gif

Знайте и применяйте правила

Это история о том, что в жизни школьная модель не работает – за неправильные решения двоек не ставят. Поэтому приложения с плохим дизайном зачастую загружаются на сервер и начинают свою нелегкую, «косую» жизнь. Не хороните знания – применяйте их на практике!

C:\Documents and Settings\Admin\Рабочий стол\iphoneX project (Divan Raj).png

20 инструментов для дизайнера мобильных приложений

Небольшая коллекция полезных инструментов для дизайнера, разрабатывающего мобильные приложения от издания Mashable:

Платформа доя прототипирования мобильных приложений. Создание интерактивных прототипов и симуляция основных пользовательских действий с поддержкой основных браузеров. Есть редактор, панель создания прототипа и плеер для просмотра интерактивного прототипа в работе.

Готовый прототип можно тестировать на реальном мобильном стройстве или в браузере.

Инструмент для создания мокапов на HTML5 с простым интерфейсом и набором форм, кнопок, полей, контейнеров и основных элементов интерфейса. 

Содержит шаблоны для прототипирования приложений под iPhone и iPad.

Инструмент быстрого создания прототипов на основе простой разметки с нуля. Есть возможность контроля итераций, редактирования и совместного комментирования проекта несколькими дизайнерами и разработчиками в режиме реального времени.

Один из самых популярных инструментов прототипирования мобильных интерфейсов и приложений. В комплекте — десятки и сотни иконок и элементов интерфейса. Есть шаблоны под несколько основных смартфонов и мобильных операционных систем.

Платформа для дизайна и прототипирования мобильных приложений для iPhone, Android-смартфонов и iPad. Поддерживает работу с виджетами.

Баузерное приложение на HTML5 для создания интерактивных прототипов мобильных приложений под Android, iOS и Windows 8. Поддерживает редактирование перетаскиванием, анимацию и библиотеку из 1700+ готовых элементов интерфейса. Есть возможность экспорта дизайнерских прототипов в различные типы документов и изображений.

Генератор интерактивных прототипов с возможность быстрого визуального редактирования и скачиваемыми библиотеками для виджетов с поддержкой фреймов для iOS, Retina-экранов, библиотеками для iPhone, iPad и Android.

Быстрый инструмент фрейминга приложений и библиотека элементов для прототипирования с поддержкой разработки дизайна приложений для iPhone, Android, iPad и Windows Phone.

Мощная платформа-конструктор с поддержкой 2D- и 3D-анимации готовых прототипов. Прототипы дизайнерских решений можно экспортировать и устанавливать на iPhone, iPad или Android-смартфон для дальнейшего тестирования.

Простой инструмент для фрейминга и прототипирования с поддержкой быстрого рисования за пару кликов. Предлагает два базовых поля для разработки шаблона или прототипа: вид в окне браузера и вид на экране смартфона. Поддерживает разработку концепции дизайна для горизонтальной и вертикальной ориентации экрана мобильных устройств (смартфоны и планшеты).

Инструмент для дизайнеров, создающий быстрые скетчи для прототипирования приложений с поддержкой работы в качестве вспомогательного решения для Eclipse IDE. Есть плагины и наборы элементов интерфейса для основных мобильных ОС.

Инструмент  создания интерфейсов и диаграмм для приложений под iPhone.

Веб-приложение для прототипирования с поддержкой кликабельных элементов интерфейса и модулем для тестирования прототипов. Есть симуляторы для iPhone и iPad.

Плоские прототипы интерфейса на основе виджетов и дополнительной библиотеки элементов. НА выходе получаете полнофункциональный HTML-прототип будущего приложения с эффектами и внутренней структурой. Готовый прототип можно экспортировать для тестирования на реальных устройствах под iOS и Android.

Инструмент создания простых мокапов для iPhone, годится для начинающего дизайнера, занимающегося прототипами.

Мощная библиотека элементов внутри веб-приложения для прототипирования, есть поддержка CSS3-эффектов. Поддерживает совместную работу над одним проектом и комментирование в реальном времени.

Прототипирование на основе как готовых, так и создаваемых дизайнером элементов. Есть возможность экспортирования набросков в различные форматы изображений.

Быстрый конструктор прототипов с функциональностью drag-and-drop и редактированием виджетов. Результат можно тестировать на iOS- и Android-устройствах.

Позволяет создавать кликабельные мокапы с возможностью навигации по элементам и структуре прототипа приложения. Есть шаблоны для iPhone/iPad и устройств на основе Android. Готовый прототип можно экспортировать в IPML, JPG, PNG, PDF или HTML, либо отправить ссылкой на веб-страницу другим участникам проекта для обсуждения и совместного тестирования.

Завершает подборку open-source инструмент разработки диаграмм и прототипов интерфейса с поддержкой встроенной библиотеки форм и элементов и возможностью создавать визуальные блок-схемы для дизайнеров мобильных приложений.

Комплексное руководство по дизайну мобильных приложений

При разработке дизайна для мобильных устройств необходимо учитывать множество факторов. Мы уверены, что это подробное руководство избавит вас от головной боли при создании приложений.

Сегодня более чем когда-либо люди взаимодействуют со своими телефонами в критические моменты. Средний пользователь из США проводит 5 часов в день за мобильным телефоном. Подавляющее большинство этого времени тратится на приложения и на веб-сайты.

Разница между хорошим и плохим приложением обычно заключается в качестве пользовательского опыта (UX). Хороший UX – это то, что отличает успешные приложения от неудачных. Сегодня мобильные пользователи много ожидают от приложения: быстрое время загрузки, простота использования и удовольствие от взаимодействия. Если вы хотите, чтобы ваше приложение было успешным, вы должны считать UX не просто второстепенным аспектом дизайна, но важным компонентом стратегии продукта.

Есть много вещей, которые следует учитывать при разработке мобильных приложений. В этой статье я обобщил множество практических рекомендаций, которые вы можете применить к своему дизайну.

Минимизируйте когнитивную нагрузку

Когнитивная нагрузка относится к количеству умственных способностей, необходимых для использования приложения. Человеческий мозг имеет ограниченную вычислительную мощность, и когда приложение одновременно предоставляет слишком много информации, оно может ошеломить пользователя и заставить его отказаться от выполнения этой задачи.

Наведение порядка

Избавление от беспорядка – одна из главных рекомендаций статьи «10 Do’s and Don’ts of Mobile UX Design». Беспорядок – один из худших врагов хорошего дизайна. Загромождая интерфейс, вы перегружаете пользователей слишком большим объемом информации: каждая добавленная кнопка, изображение и иконка усложняют экран.

Беспорядок на ПК ужасен, но на мобильном устройстве он намного хуже (просто потому, что у нас не так много полезного пространства экрана, как на ПК и ноутбуках). В мобильном дизайне важно избавиться от всего, что не является абсолютно необходимым, потому что уменьшение беспорядка улучшит понимание. Техника функционального минимализма может помочь вам решить проблему загроможденного пользовательского интерфейса:

  • Сократите контент до минимума (предоставьте пользователю только то, что ему нужно знать).
  • Сохраняйте минимум элементов интерфейса. С простым дизайном пользователю легче взаимодействовать с продуктом.
png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Комплексное руководство по дизайну мобильных приложенийЧистая панель вкладок (справа) намного лучше, чем загроможденная (слева). (Изображение: Apple)
  • Используйте метод прогрессивного раскрытия, чтобы показать больше вариантов.
png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Комплексное руководство по дизайну мобильных приложенийИнтерфейс показывает больше возможностей после взаимодействия. (Изображение: Ramotion)

Упрощайте задачи

Ищите в дизайне все, что требует усилий пользователя (это может быть ввод данных, принятие решения и т. д.), и ищите альтернативные пути. Например, в некоторых случаях вы можете повторно использовать ранее введенные данные вместо того, чтобы просить пользователя ввести их повторно, или использовать уже имеющуюся информацию для установки умного значения по умолчанию.

Разбивайте задачи на небольшие куски

Если задача содержит много шагов и действий, требуемых от пользователя, лучше разделить ее на несколько подзадач. Этот принцип чрезвычайно важен в мобильном дизайне, потому что вы не хотите создавать слишком много сложности для пользователя за один раз. Хороший пример – пошаговый процесс оформления заказа в приложении электронной коммерции, когда дизайнер разбивает сложную задачу оформления заказа на куски, каждый из которых требует действий пользователя.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Комплексное руководство по дизайну мобильных приложенийРазбивка задачи делает форму менее загруженной, особенно когда вы запрашиваете у пользователя много информации. (Изображение: Murat Mutlu)

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Комплексное руководство по дизайну мобильных приложенийПоиск фильма и покупка билетов в кинотеатр. (Изображение: Anton Skvortsov)

Используйте знакомые экраны

Знакомые экраны – это экраны, которые пользователи видят во многих приложениях. Такие экраны, как «Начало работы», «Что нового» и «Результаты поиска», де-факто стали стандартами для мобильных приложений. Они не требуют дополнительных объяснений, потому что пользователи уже знакомы с ними. Это позволяет пользователям использовать предыдущий опыт взаимодействия с приложением без необходимости обучения.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Комплексное руководство по дизайну мобильных приложенийЭкран профиля пользователя в приложении Quora

Для получения дополнительной информации о знакомых экранах. Прочтите статью «11 экранов, которые вы найдете во многих самых успешных мобильных приложениях».

Минимизируйте ввод информации пользователем

Набор текста на маленьком мобильном экране – не самое удобное занятие. На самом деле, оно часто подвержено ошибкам. И наиболее распространенным случаем ввода данных пользователем является заполнение формы. Вот несколько практических рекомендаций по упрощению этого процесса:

  • Делайте формы максимально короткими, удаляя ненужные поля. Приложение должно запрашивать у пользователя только минимальный объем информации.
png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Комплексное руководство по дизайну мобильных приложенийОсновное правило в дизайне форм – чем короче, тем лучше. Объедините несколько полей в одно удобное для заполнения поле. (Изображение: Luke W.)
  • Предоставьте маски ввода. Маски полей – это метод, который помогает пользователям форматировать введенный текст. Маска появляется, когда пользователь фокусируется на поле, и автоматически форматирует текст по мере заполнения поля, помогая пользователям сосредоточиться на необходимых данных и легче заметить ошибки.
png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Комплексное руководство по дизайну мобильных приложений(Изображение: Josh Morony)
  • Используйте такие интеллектуальные функции, как автозаполнение. Например, заполнение поля адреса часто является наиболее проблемной частью любой регистрационной формы. Использование таких инструментов, как Place Autocomplete Address Form(который использует как географическое местоположение, так и предварительное заполнение адреса для предоставления точных предложений, основанных на точном местоположении пользователя), позволяет пользователям вводить свой адрес с меньшим количеством нажатий клавиш, чем при обычном поле ввода.
  • Динамическая проверка значения полей. Это печально, когда после отправки данных вам приходится возвращаться и исправлять ошибки. По возможности, проверяйте значения полей сразу после ввода данных, чтобы пользователи могли их мгновенно исправить.
png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Комплексное руководство по дизайну мобильных приложенийВстроенная проверка (Изображение: Baymard)
  • Кастомизируйте клавиатуру для типа запроса. При запросе номера телефона отобразите цифровую клавиатуру и добавьте кнопку @ при запросе адреса электронной почты. Убедитесь, что эта функция реализована последовательно во всем приложении, а не только для определенных форм.
png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Комплексное руководство по дизайну мобильных приложенийПодберите клавиатуру для ввода требуемого текста. (Изображение: ThinkWithGoogle)

Предвосхищайте потребности пользователя

Проактивно ищите шаги в путешествии пользователя, где ему может понадобиться помощь. Например, на снимке экрана ниже показана часть, где пользователям необходимо предоставить конкретную информацию.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Комплексное руководство по дизайну мобильных приложенийНе очевидно, где пользователь может найти штрих-код. Краткая справка рядом с полем ввода будет очень полезной. (Изображение: Hotjar)

Используйте визуальный вес, чтобы подчеркнуть важность

Самый важный элемент на экране должен иметь наибольший визуальный вес. Добавление большего веса к элементу возможно посредством изменения веса, размера и цвета шрифта.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Комплексное руководство по дизайну мобильных приложенийБольшие предметы привлекают внимание и кажутся более важными, чем мелкие. Кнопка «Request Lyft» привлечет внимание пользователя

Избегайте жаргона

Четкое общение всегда должно быть главным приоритетом в любом мобильном приложении. Используйте то, что вы знаете о своей целевой аудитории, чтобы определить, подходят ли определенные слова или фразы.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Комплексное руководство по дизайну мобильных приложенийНеизвестные термины или фразы увеличат когнитивную нагрузку на пользователя. (Изображение: ThinkWithGoogle)

Сделайте дизайн последовательным

Последовательность является основополагающим принципом дизайна. Она устраняет путаницу. Поддержание общего согласованного внешнего вида во всем приложении имеет важное значение. Что касается мобильного приложения, последовательность означает следующее:

  • Визуальная согласованность
    Шрифты, кнопки и метки должны быть последовательными  во всем приложении.
  • Функциональная последовательность
    Интерактивные элементы должны работать одинаково во всех частях вашего приложения.
  • Внешняя согласованность
    Дизайн должен быть последовательным для нескольких продуктов. Таким образом, пользователь может применить ранее полученные знания при использовании другого продукта.

Вот несколько практических рекомендаций по созданию последовательного дизайна:

  • Соблюдайте стандарты платформы.
    Каждая мобильная ОС имеет стандартные рекомендации по дизайну интерфейса: Human Interface Guidelines от Apple и Material Design Guidelines от Google. При проектировании для нативных платформ соблюдайте дизайн-рекомендации ОС для обеспечения максимального качества. Причина, по которой важно следовать дизайн-рекомендациям, проста: пользователи знакомятся с паттернами взаимодействия каждой ОС, и все, что противоречит руководящим принципам, вызывает проблемы.
  • Не имитируйте элементы интерфейса с других платформ.
    При создании приложения для Android или iOS не переносите элементы интерфейса с других платформ. Иконки, функциональные элементы (поля ввода, флажки, переключатели) и шрифты должны выглядеть естественно. Максимально используйте нативные компоненты, чтобы люди доверяли вашему приложению.
  • Следите, чтобы мобильное приложение соответствовало веб-сайту.
    Это пример внешней согласованности. Если у вас есть веб-сервис и мобильное приложение, убедитесь, что оба они имеют сходные характеристики. Это позволит пользователям совершать беспроблемные переходы между мобильным приложением и мобильным сайтом. Несоответствие в дизайне (например, другая навигационная схема или другая цветовая схема) может привести к путанице.

Предоставьте пользователю контроль

Сделайте интерактивные элементы знакомыми и прогнозируемыми

Предсказуемость является фундаментальным принципом UX дизайна. Когда все работает так, как предсказывают пользователи, они чувствуют сильное чувство контроля. В отличие от ПК, где пользователи могут использовать эффекты при наведении курсора, чтобы понять, является ли элемент интерактивным или нет, на мобильном телефоне пользователи могут проверять интерактивность, только нажав на элемент. Вот почему важно подумать о том, как дизайн кнопок и других интерактивных элементов передает доступность. Как пользователи понимают, что элемент – это кнопка? Форма должна следовать за функцией: внешний вид объекта говорит пользователям, как его использовать. Визуальные элементы, которые выглядят как кнопки, но не нажимаются, легко запутают пользователей.

Кнопка Назад» должна работать правильно

Неправильно созданная кнопка «назад» может вызвать много проблем у пользователей. Не допустите ситуаций, когда нажатие кнопки «назад» в многошаговом процессе вернет пользователей обратно к начальному экрану.

Хороший дизайн облегчает пользователям возврат и внесение исправлений. Когда пользователи знают, что могут еще раз взглянуть на предоставленные ими данные или выбранные параметры, это позволяет им с легкостью действовать.

Информативные сообщения об ошибках

Человеку свойственно ошибаться. Ошибки возникают, когда люди взаимодействуют с приложениями. Иногда они случаются по вине пользователя. Иногда они случаются из-за сбоя приложения. Независимо от причины ошибки, способы ее обработки имеют огромное влияние на UX. Плохая обработка ошибок в сочетании с бесполезными сообщениями об ошибках может вызвать у пользователей разочарование и стать причиной, по которой пользователи покинут ваше приложение. Возьмем  в качестве примера экран состояния ошибки из Spotify. Он не помогает пользователям понять контекст или найти ответ на вопрос: «Что я могу с этим поделать?»

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Комплексное руководство по дизайну мобильных приложенийЭкран ошибок Spotify просто говорит: «Произошла ошибка» и не дает каких-либо конструктивных советов о том, как решить проблему

Не думайте, что пользователи достаточно разбираются в технологиях, чтобы самостоятельно понять причину ошибки. Всегда говорите людям, что не так на простом языке. Каждое сообщение об ошибке должно сообщать пользователям:

  • что пошло не так и, возможно, почему,
  • какой следующий шаг должен предпринять пользователь, чтобы исправить ошибку.

Для получения дополнительной информации об обработке ошибок прочтите статью «Как проектировать состояния ошибок для мобильных приложений».

Проектируйте доступный интерфейс

Доступный дизайн позволяет пользователям с разными возможностями успешно использовать продукты. Подумайте, как пользователи с потерей зрения, потерей слуха и другими нарушениями могут взаимодействовать с вашим приложением.

Учитывайте цветовую слепоту

4.5% населения мира страдают дальтонизмом (это 1 из 12 мужчин и 1 из 200 женщин), 4% страдают слабым зрением (1 из 30 человек) и 0,6% являются слепыми (1 из 188 человек). Легко забыть, что мы проектируем для этой группы пользователей, потому что большинство дизайнеров не сталкиваются с такими проблемами.

Позвольте мне привести простой пример. Сообщения об успехах и ошибках в мобильных формах часто окрашиваются в зеленый и красный цвета соответственно. Но красный и зеленый – это цвета, наиболее подверженные дефициту цветового зрения (эти цвета трудно различать людям с дейтеранопией или протанопией). Скорее всего, вы видели следующее сообщение об ошибке при заполнении формы: «Поля, отмеченные красным, обязательны для заполнения»? Хотя это может показаться не очень важным, это сообщение об ошибке в сочетании с формой в приведенном ниже примере может быть крайне разочаровывающим для людей с дефицитом цветового зрения.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Комплексное руководство по дизайну мобильных приложенийДизайн поля формы опирается только на красный и зеленый цвета для обозначения полей с ошибкой и без нее. Дальтоники не могут различать поля, выделенные красным

Как указано в рекомендациях W3C, цвет не должен использоваться в качестве единственного визуального средства передачи информации, указания действия, запроса ответа или различения визуального элемента. Важно использовать другие визуальные индикаторы, чтобы убедиться, что пользователи смогут взаимодействовать с интерфейсом.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Комплексное руководство по дизайну мобильных приложенийИспользование иконок и подписей, чтобы показать, какие поля содержат ошибку, лучше передает информацию дальтонику

Сделайте анимации отключаемыми

Пользователи, которые страдают от укачивания, часто отключают анимационные эффекты в настройках ОС. Если в настройках доступности включена опция уменьшения движения, ваше приложение должно минимизировать или устранить анимации.

Сделайте навигацию простой

Помощь пользователям в навигации должна быть приоритетной задачей любого приложения. Все интересные функции и привлекательный контент не имеют значения, если люди не могут их найти. Кроме того, если потребуется слишком много времени или усилий, чтобы понять, как ориентироваться в вашем продукте, скорее всего, вы просто потеряете пользователей. Пользователи должны иметь возможность исследовать приложение интуитивно и выполнять все основные задачи без каких-либо объяснений.

Используйте стандартные компоненты навигации

Лучше использовать стандартные паттерны навигации, такие как панель вкладок (для iOS) и навигационный ящик (для Android). Большинство пользователей знакомы с обоими паттернами навигации и интуитивно знают, как использовать ваше приложение.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Комплексное руководство по дизайну мобильных приложенийSide drawer (Android). (Изображение: Material Design) png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Комплексное руководство по дизайну мобильных приложенийПанель вкладок (iOS). (Изображение: Ramotion)

Подробнее о паттернах навигации читайте в статье «Основные паттерны мобильной навигации: за и против».

Приоритизация навигационных опций

Расставьте приоритеты навигации в зависимости от того, как пользователи взаимодействуют с вашим приложением. Назначьте различные уровни приоритета (высокий, средний, низкий) для общих пользовательских задач. Выделите в интерфейсе пути и пункты назначения с высоким уровнем приоритета и частым использованием. Используйте эти пути для определения вашей навигации. Организуйте свою информационную структуру таким образом, чтобы требовалось минимальное количество нажатий, свайпов и экранов.

Не смешивайте навигационные паттерны

Когда вы выбираете основной паттерн навигации для своего приложения, используйте его последовательно. Не должно быть ситуации, в которой часть вашего приложения имеет панель вкладок, а другая часть имеет боковой ящик.

Сделайте навигацию заметной

Как говорит Якоб Нильсен, распознать что-либо легче, чем запомнить. Минимизируйте нагрузку на память пользователя, делая действия и параметры заметными. Навигация должна быть доступна всегда, а не только, когда мы считаем, что она нужна пользователю.

Сообщайте текущее местоположение

Неспособность указать текущее местоположение – очень распространенная проблема многих меню мобильных приложений. «Где я?» – один из фундаментальных вопросов, на которые пользователи должны ответить, чтобы успешно ориентироваться. В любой момент люди должны знать, где они находятся в вашем приложении.

Вклад дизайнера в разработку мобильных приложений / Хабр

Дизайнер и его роль в разработке мобильных приложений


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

Не секрет, что проектные команды часто меняются. Сегодня над проектом работает один, а завтра уже абсолютно другой человек. Поэтому дизайн мобильного приложения — это не просто хорошо нарисованные картинки, но и качественно переданный материал, показывающий другим людям, как должно работать приложение.

В этой статье я хочу рассказать о взаимодействии разработчика с дизайнером, основываясь на собственном опыте разработки мобильного приложения, о своих ожиданиях от проекта и жестокой реальности. Надеюсь, эта статья заставит многих дизайнеров-новичков призадуматься над своей работой, а также поможет разработчикам справится с некоторыми сложными ситуациями.



Как дизайнер может облегчить жизнь разработчику?


Итак, у дизайнера, независимо от его профиля и направленности, существует множество инструментов, с помощью которых он может отрисовать то, что от него требуют. Только вот просто отрисовать экраны мобильного приложения недостаточно. Это не веб-сайт и не веб-приложение. У этой категории цифровых продуктов более строгие правила, которым нужно подчиняться. Под платформы IOS и Android созданы отдельные гайдлайны (см. раздел «Полезные ссылки»).

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

В настоящее время ситуация складывается так, что у разработчиков, как и у дизайнеров, очень много специфических инструментов и гайдов. Им не то что не хочется вникать в инструменты дизайна — им просто некогда. Дизайнер только сдал свою работу, а от разработчика уже требуют результаты менеджер проекта и клиент. Чем же в этом случае может помочь дизайнер? Как он может сэкономить время разработчику? Все довольно просто — нужно правильно подобрать инструменты не только для отрисовки проекта, но и для последующей работы с командой разработчиков.

После нескольких лет работы во многих непохожих друг на друга командах, я понял, как влияет дизайн на скорость разработки и комфортную работу в коллективе. Поэтому теперь, перед тем, как принять дизайн в разработку, я проверяю его на соответствие некоторым стандартам и правилам.

Дизайнер — часть команды


Это не просто пафосные слова. Дизайнер должен быть частью команды до сдачи приложения в магазин, постоянно общаться с коллегами, уточнять вопросы и быстро реагировать на запросы разработчиков. Минимальный срок его нахождения в команде — до первой сдачи MVP.
Как показывает практика, дизайнеры не всегда качественно сдают свои макеты, и при дальнейшей разработке всплывают какие-то недочеты, например, не отрисованные пустые экраны или какие-то состояния элементов, неверно нарезанные блоки элементов, отсутствие каких-то ресурсов. Бывает также, что клиент хочет что-то добавить.

Дизайнеру приходится доделывать свою работу, и хорошо, если он будет в это время в команде, чтобы можно было быстро внести изменения. Или он должен быть на связи для того, чтобы у проекта и команды не было проблем с оперативным изменением UI/UX.

Разработчик не должен разбираться, в каких программах был нарисован проект. Файлы должны открываться легко


Как уже было сказано выше, разработчику сейчас приходится столько всего изучать, что времени разбираться в графических редакторах просто нет. Поэтому дизайнер не должен отрисовывать элементы в Photoshop / Illustrator и сдавать макет в *.psd / *.ai файлах. Такие файлы довольно много весят и требуют установки пакета Adobe. Даже если это не играет особой роли, на изучение этих редакторов просто нет времени.

Разработчик хочет просто выбирать элементы и видеть, как их верстать, а не разбираться в структуре слоев одного огромного файла. Сейчас существует много графических редакторов для отрисовки мобильных приложений: Sketch, Figma и другие. В общем, есть из чего выбрать. От выбранного редактора будет зависеть то, как дизайнер представит кликабельный прототип и “живые экраны” для фронтенда.

Если дизайнер выбрал Figma, то “живые” экраны, кликабельный прототип, юзер стори, переходы экранов, семейства шрифтов и колористика, ресурсы можно скачивать самостоятельно — все находится в одном месте. Изменения дизайна видны сразу. Как и у многих сервисов, у Figma есть свои минусы. Но это довольно удачный выбор, хотя бы потому, что данный редактор не требует установки специального ПО. Нужен просто переход по ссылке на проект. Главное, чтобы был интернет.

Sketch — тоже неплохой выбор. Дизайнер в пару к этому редактору может использовать такие инструменты прототипирования как Zeplin или InVision, если с ними уже работает команда разработчиков. Это программы не требуют углубленного изучения инструментария.

Дизайнер должен знать гайдлайны под разные платформы и их отличия


Довольно часто дизайнеры рисуют проекты, не разбираясь в гайдлайнах, смешивают стили или создают нестандартные элементы, думая о красоте экрана. Таких примеров довольно много на Dribbble и Behance. Клиенты, не зная об этих нюансах, одобряют макеты. Когда дело доходит до разработки, дело стопорится. Дизайнер не хочет переделывать неправильно выполненную работу. Заказчик требует именно такой экран или эффект, который он одобрил, но его невозможно сделать.

Поэтому очень важно, чтобы дизайнер разбирался в том, что и как можно отрисовывать.

Ресурсы


Это самый больной вопрос при взаимодействии с дизайнером. Обычно дизайнеры не нарезают ресурсы. В большинстве своем они считают, что: не обязаны это делать; это долго и монотонно, и если разработчику надо, он сам все нарежет или можно сбросить *.svg; не знают, что именно нужно нарезать и в каких размерах.

Тем не менее, если взглянуть со стороны разработчика, решение этого вопроса очень сильно сокращает время работы. Ему достаточно взглянуть на название ресурса на прототипе и найти в папке ресурсов такое же — и все, он продолжает верстку. А если представить, что разработчику нужно самому нарезать ресурсы? Он должен полностью выделить нужный элемент на экране, найти экспорт, указать размеры и путь.

Только кажется, что это быстрая работа. Но элементов много, и времени тратится масса. Опять же, макеты не всегда сдаются в идеальном состоянии. Дизайнер не всегда всё учитывает. Также инструмент прототипирования может неправильно сработать при экспорте.

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

ТЗ с описанием работы экранов


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

Как говорилось выше, члены проектных команд часто меняются. Никто не хочет возиться с новичками. Возможно, коллеги сделают краткий обзор, скинут ссылки на все выданные дизайнером ресурсы — и все. От разработчика ждут, что он начнет работать с полным понимаем, как функционирует приложение. Чаще всего ТЗ, разъясняющего это, нет, поскольку дизайнер не знал о том, что оно требуется, или не захотел его делать. И что же выходит? Работа стопорится. Новый член команды не понимает, что и как функционирует, работает в полсилы, тратя при этом время команды.

Что делать, если ничего из вышеперечисленного нет, а работать нужно?


Так получилось, что все вышеперечисленные требования стали обязательными в одном из моих проектов.

Проект был связан с арендой недвижимости и разрабатывался под две платформы: IOS и Android. Процесс разработки начинался как любой другой. Позже оказалось, что дизайнер не полностью разбирался в мобильных приложениях. Что такое гайды он не знал. На дизайне присутствовали прозрачные элементы, шрифты использовались только под одну платформу. Колористику можно было описать как использование “50 оттенков серого”.

Мне дали *.psd файл. Вроде бы ничего плохого. Такие файлы сдают многие дизайнеры. Но мне пришлось установить пакет Adobe, чтобы взглянуть на макет. Файл был очень “тяжелым” и открывался минут 10. Не все экраны были отрисованы отдельно на рабочей области. Они находились один поверх другого как слои, и чтобы посмотреть один экран, нужно было отключить все остальные. Так как у меня не было значительного опыта работы с пакетом, я подумал об Avocode как об инструменте для обработки дизайн-материала. Конечно, эта программа не идеальна, но она меня буквально спасла.

Кликабельный прототип мне передали в InVision. Замечу, просто кликабельный прототип без живых экранов.

Выводы:


Что я ожидал получить от дизайнера:
  • кликабельный прототип и живые экраны (InVision, Zeplin или Figma)
  • переработанное ТЗ с описанием работы экранов
  • карту экранов с переходами
  • пользовательскую историю
  • нарезанные ресурсы в размерах @1, @2, @3
  • шрифты

Из всего перечисленного я получил только кликабельный прототип и *psd файл.

Проект доведен до конца и выложен в магазин. Но чтобы добиться этого результата, моя команда прошла семь кругов Ада или, как говорится, столкнулась с определенными трудностями.

Многие не согласятся и скажут, что предоставленных материалов достаточно. Но мы говорим о профессионализме и о том, как ситуация выглядит со стороны разработчиков. В конце концов, дизайнер мобильного приложения — это не просто художник. Это член команды, работающей над сложным проектом. Свою работу он должен делать хорошо, ведь для него это еще не конец работы над проектом, а для команды — только начало.

Всем спасибо за внимание и успешных проектов!

Полезные ссылки:


IOS guidelines
Android guidelines
Problems of development the legacy mobile project
Figma
Sketch

Дизайн мобильного приложения. Как добиться оптимального результата?

О дизайне мобильных приложений написано уже много всего. Тем не менее в этой сфере есть огромное количество нюансов. Некоторые известны не всем, другие быстро забываются. В этом посте мы постараемся описать несколько приемов работы с дизайном приложения, которые можно назвать эффективными и проверенными.

В идеале приложение для мобильного устройства должно работать со скоростью мысли. Более того, интерфейс приложения должен быть понятен даже новичку.

1. Правила, которые всегда работают


Стоит выделить пять основных факторов, имеющих важное значение при проектировании взаимодействия с приложением.

Целеориентированность. Вы создаете дизайн для конкретного пользователя. Сейчас в Сети большое количество данных о различных категориях пользователей, причем многие материалы — исследования, обзоры — доступны бесплатно. Изучение этой информации поможет вам создать приложение, которое полностью соответствует потребностям целевой аудитории.

Юзабилити. Ваше приложение должно быть удобным и интуитивно понятным. К примеру, если вы хотите указать ссылку для перехода на сторонний ресурс, то оформляйте ее привычным образом — с помощью подчеркнутого голубого текста. Удобство и практичность — это первый шаг на пути к тому, чтобы ваша программа стала желанной для пользователя.

Возможность (аффо́рданс) и символичность. Аффо́рданс — это функция. Для простоты снова воспользуемся приемом со ссылкой. Так, голубой подчеркнутый текст указывает на то, что клик по нему переведет пользователя по какому-то адресу. Подобные символы нужно использовать таким образом, чтобы пользователь не размышлял о том, что может означать тот или иной элемент интерфейса. Практичность и рациональность — наше все.

Обучаемость. В идеале пользователь должен без труда догадываться, как работать с программой. Здесь приходят на помощь знакомые и привычные схемы оформления приложения. Они должны помочь человеку без проблем привыкнуть к программе.

Фидбек и время ответа. Отклик приложения должен давать пользователю представление о том, выполнена задача или нет. Это может быть обычный звуковой сигнал или нечто более сложное — например, модальное окно. Убедитесь в том, что фидбек приложения соответствует положениям, установленным Nielsen Norman Group.

Как верно заметил Эндрю Майер (Andrew Maier) в своей статье, эти пять правил должны стать основой, определяющей проектирование любого типа взаимодействия.

2. Знать своих пользователей


Первым шагом при создании целеориентированного интерфейса является изучение своей аудитории. Размер дисплея — это не единственное ограничение при разработке мобильного приложения. Пользователи также формируют требования к интерфейсу и необходимо их учитывать.

В этом вопросе есть четкая тактика, состоящая из трех положений:

Personas: помогает понять, что будет побуждать пользователя выполнить то или иное действие внутри приложения. Это формальные, теоретические модели реальных пользователей.

User Scenarios: обеспечивает моделирование различных ситуаций, помогает предсказать действия пользователя. Благодаря этому можно разработать интерфейс, который оптимально подходит для смоделированных пользователей и задач, которые они хотят выполнить.

Experience maps: здесь изучаются все возможные условия отдельного взаимодействия. Схема поможет описать каждый шаг пользователя, который будет выполнен с высокой вероятностью на определенном этапе работы с приложением. Такая схема поможет понять эмоции и обстоятельства, которые приводят к выполнению каждого действия.

Самым простым способом выполнения этих пунктов может быть, например, удаленное тестирование юзабилити при помощи сервиса вроде UserTesting, что помогает изучить поведение пользователей в естественных условиях. Чтобы еще лучше изучить этот вопрос (например, учитывать жесты и даже положение тела), стоит провести работу с реальными пользователями (минимум — пять человек).

Отличные советы по этому вопросу дает Джефф Саурос (Jeff Sauros).

3. Контент и поведение пользователей


Этот пункт позволяет параллельно проводить разработку приложения и изучать возможное поведение пользователей. Идеальным вариантом является набросок, по которому изучается взаимодействие пользователей с контентом. И в этом нет ничего глупого — работу человека с содержимым программы можно проиллюстрировать на бумаге. Это поможет понять, как примерно будут вести себя пользователи внутри приложения.

К примеру, вы создаете банковское приложение. Предполагаемый сценарий: пользователь хочет включить функцию автоматического внесения средств на счет:

Автодепозит выкл.

[Настройки автодепозита]

Выбираем период

[Раз в месяц][Дважды в месяц]

[Через неделю][Каждую неделю]

Депозит

Раз в месяц

[Выбрать календарный день]

Установка суммы

[Ввести сумму]

[Настройки автодепозита]

Прежде чем сделать прототип, рукописная схема поможет изучить наиболее важную часть приложения — контент. Понимание возможной схемы взаимодействия пользователя с контентом поможет дать более точную оценку числа страниц/экранов, необходимых в программе.

Следующий шаг — создание схемы для каждой страницы перехода (в нашем случае это четыре схемы). И здесь уже можно продолжать итерации, постепенно переходя от бумажных схем к цифровому прототипированию (в этом может помочь инструмент вроде UXPin).

Схема поможет быстро изучить возможные переходы на страницы / со страниц приложения. Скетчи позволят «оживить» приложение и понять большее количество деталей и структуры программы. А уже цифровой прототип поможет протестировать поведение реальных пользователей.

4. Улучшение юзабилити с использованием знакомых пользователю схем


Дизайн мобильного приложения стоит сделать «знакомым» для пользователя. К примеру, практически все картографические сервисы используют прием навигации slide-out. Это позволяет пользователю чувствовать себя «как дома». Приложение незнакомо, но схема работы с ним общеизвестна и понятна.

Стоит уточнить, что мы не предлагаем вам копировать дизайн приложений других разработчиков. Речь идет именно об использовании общедоступных элементов интерфейса. Если вы воспользуетесь этим советом, стоит убедиться, что дизайн вашего приложения соответствует ожиданиям пользователя.

Рекомендуем использовать две категории схемы взаимодействия пользователей с интерфейсом приложения:

Жесты: Тап, свайп, двойной тап, щипок, масштабирование — все это давно стало привычным для пользователя. Подробно о жестах можно узнать вот здесь.

Оживление: здесь имеется в виду анимация, которая сделает приложение более живым. Рекомендуем объединить анимацию с жестовым управлением.

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

Yelp — отличный пример приложения с интуитивно понятным интерфейсом.

5. Учитываем размер пальцев пользователя


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

Им просто нужно оставлять достаточно места. Если ваши кнопки слишком малы или расположены слишком близко друг к другу, некоторые люди просто не смогут попадать по ним. Как следствие, пользователи будут раздражаться и, может быть, прекращать работу с такой программой.

Вот что стоит учитывать, проектируя кнопки и другие сенсорные элементы:

Все мы держим телефон или планшет по-разному. Даже один и тот же человек в различных ситуациях держит устройство разными способами.

Наши пальцы действительно большие. Их ширина составляет около 45–57 пикселей, что больше, чем рекомендует большинство руководств для тестовых устройств. Apple, например, рекомендует цель квадратной формы с размером стороны в 44 пикселя. А этого далеко не всегда достаточно.

6. Не отказывайтесь от градиента и теней


Да, плоский дизайн уже стал новым стандартом, но это вовсе не значит, что тени и градиент — далекое прошлое и от такого варианта оформления нужно отказаться. Вовсе нет, просто подход к дизайну несколько изменился.

Тень обычно очень актуальна при проектировании кнопок, переключателей и подобных элементов.

Тени и градиент отдельных элементов делают интерфейс более понятным пользователю. Эти приемы оформления можно использовать для создания объемных кнопок и полей ввода.

7. Убираем хаос


Правило трех кликов актуально и сейчас, и его стоит использовать при проектировании дизайна приложений. Почему? Да потому, что оно позволяет понять, что именно действительно необходимо для страниц приложения.

В идеале пользователь должен выполнить все задачи быстро и за как можно меньшее количество действий. СЕО Yahoo Марисса Майер даже предлагает использовать правило двух тапов. Если этот принцип не соблюдается, Марисса предлагает работать над приложением дальше, совершенствуя его дизайн.

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

Процесс создания дизайна мобильного приложения с нуля

Я начала изучать графический дизайн, когда мне было 13 лет. Я научилась проектировать веб-сайты по онлайн-курсам и целыми днями игрался с Photoshop и Affinity Designer. Этот опыт научил меня мыслить, как дизайнер.

Я занимаюсь проектированием и разработкой приложений уже почти год. Я приняла участие в программе Массачусетского технологического института, где я работала в команде по разработке приложения Universeaty. Два месяца назад я начала работать над новым приложением Crypto Price Tracker, которое вышло недавно, 28 января.

В этой статье я поделюсь поэтапным процессом проектирования, которому я следую при работе над приложениями. Это должно помочь тем, кто хочет научиться или улучшить свои навыки цифрового дизайна. Дизайн – это не только то, как использовать программное обеспечение для проектирования, и эта статья не научит вас, как его использовать. Есть сотни качественных обучающих программ в Интернете. Дизайн также касается понимания сути вашего продукта, его функциональности, а также проектирования, не забывая о конечных пользователях. Вот чему вас научит эта статья.

Процесс проектирования:

  1. Создайте юзерфлоу для каждого экрана.
  2. Создайте / нарисуйте прототипы.
  3. Выберите шаблоны дизайна и цветовые палитры.
  4. Создайте дизайн.
  5. Создайте анимированный прототип приложения и попросите людей проверить его и оставить отзыв.
  6. Сделайте финальную ретушь макетов, чтобы все финальные экраны были готовы к разработке.

Давайте начнем!

Юзерфлоу

Первый шаг – выяснить, какие функции вы хотите видеть в своем приложении. После того, как у вас появились идеи, создайте юзерфлоу. Это блок-схема работы вашего приложения.

Обычно юзерфлоу состоит из трех типов фигур.

  • Прямоугольники используются для представления экранов.
  • Ромбы используются для условий (например, нажатие кнопки входа в систему, свайп влево, увеличение).
  • Стрелки соединяют экраны и условия вместе.

Юзерфлоу очень полезны, потому что они дают хорошее логическое представление о том, как приложение будет функционировать.

Вот диаграмма юзерфлоу, которую я нарисовала, когда начала работать над дизайном моего приложения.

1 1 80x60 - Процесс создания дизайна мобильного приложения с нуляЮзерфлоу для основного интерфейса.

Прототипы

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

Я использую печатные шаблоны из UI Stencils для рисования каркасов. Это экономит время и дает хорошую рабочую область для рисования и заметок.

Вот пример прототипа.

2 1 80x108 - Процесс создания дизайна мобильного приложения с нуляПрототип интерфейса мобильного приложения

После создания прототипов вы можете использовать приложение под названием Pop и сделать снимок всех своих рисунков с помощью приложения и получить кликабельный прототип, связав все экраны с помощью кнопок.

Наброски дизайна и цветовые палитры

Это моя любимая часть. Это похоже на разглядывание витрин. Множество паттернов дизайна и цветовых палитр на выбор. Я выберу те, которые мне нравятся, и буду экспериментировать с ними.

Лучшие платформы для поиска паттернов – это Mobile Patterns и Pttrns. И чтобы найти хорошие цветовые палитры, посетите сайт Color Hunt.

Дизайн

Наконец вы переходите к использованию программного обеспечения для создания дизайна. Это похоже на то, что вы вошли в свое приложение в будущем, и сделали несколько скриншотов. Это должно выглядеть реалистично и в значительной степени похоже на реальную вещь.

Существуют программные средства разработки и инструменты для создания дизайна. Я использую Affinity Designer. Наиболее часто используемым инструментом для дизайна iOS является Sketch.

Вот пример некоторых ранних дизайнов моего приложения.

3 80x60 - Процесс создания дизайна мобильного приложения с нуляПеренесение рисунка в пиксели!

Я больше экспериментировала с различными цветовыми палитрами.

4 1 80x33 - Процесс создания дизайна мобильного приложения с нуля

Я поделилась первоначальными макетами с друзьями, чтобы получить их отзывы. Кажется, многим понравилась схема с золотым градиентом и черным.

Будьте готовы получить отзывы и поэкспериментировать с новыми предложениями! Вы получите удивительные отзывы от своих пользователей, когда разговариваете с ними, а не когда лихорадочно просматриваете Dribbble или Behance.

Поэтому я переработала макет и удалила фоновые графики, потому что их генерация была технически трудоемким процессом, и они снижали читабельность. Что в итоге вышло:

5 1 80x143 - Процесс создания дизайна мобильного приложения с нуляЗолотой градиент с черным на удивление хорошо выглядит!

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

Когда все мои экраны были готовы, я собрала прототип в Adobe XD и попросила нескольких друзей поэкспериментировать и дать свой отзыв.

После последних штрихов именно так выглядит финальная версия моего дизайна.

6 1 80x80 - Процесс создания дизайна мобильного приложения с нуляФинальная версия дизайна

После того, как все экраны были завершены, я импортировала их в Xcode и начала разработку приложения.

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

Я заканчиваю статью одной из моих любимых цитат о дизайне

 «Дизайн – это не только, как предмет выглядит и ощущается. Дизайн – это то, как он работает»
– Стив Джобс

5 последних примеров дизайна современных веб-приложений (2020)

The CEO Dashboard Web App

Время от времени мне попадаются примеры дизайна веб-приложений, которые действительно меня привлекают. Я перечислил эти веб-приложения ниже и оценил их от 5 до 1.

Эти веб-приложения содержат прекрасное сочетание дизайна, удобства использования и творчества. Это шедевры и прекрасные знаки вдохновения.

Огромное количество времени и размышлений было потрачено на разработку этих веб-приложений, и дизайны должны отдать должное.

Что такое дизайн веб-приложений

Дизайн веб-приложения — важный этап при создании веб-приложения. Он ориентирован на внешний вид веб-приложения.

Стадия проектирования включает несколько различных аспектов, включая дизайн пользовательского интерфейса (UI), удобство использования (UX), создание контента и графический дизайн. В этом посте мы сосредоточились в основном на UI и UX дизайне.

Что такое пользовательский интерфейс в веб-приложении?

UI расшифровывается как пользовательский интерфейс.Пользовательский интерфейс — это часть веб-приложения, с которой взаимодействует пользователь. Это простые термины, это все, что вы видите и касаетесь, например кнопки, цвета, шрифты, навигация и т. Д.

Что такое UX в веб-приложении?

UX расшифровывается как User Experience. UX фокусируется на том, как пользователи относятся к приложению, и на их опыте использования. Было ли веб-приложение трудным в использовании, было ли оно медленным, был ли пользователь разочарован при его использовании? Это типы вопросов, на которых UX-дизайнер сосредоточится при обзоре веб-приложений.

5 наших лучших дизайнов веб-приложений

Следующие веб-приложения были выбраны из списка 62 участников, представленного командой Budibase. Оценка основана на:

  1. Проект
  2. Удобство использования
  3. Творчество

Хорошо, давайте сделаем это!

5. Домофон

Intercom UI

Первым в нашем списке стоит Intercom.

Intercom описывает свою компанию как набор продуктов для обмена сообщениями, предназначенных для ускорения роста бизнеса.Пакет продуктов Intercom, основанный в 2011 году, претерпел несколько изменений в дизайне, в том числе последний раз в марте 2019 года.

Intercom old v new UI

Самый последний дизайн вызвал много похвал, а также некоторого негатива со стороны темных уголков Интернета, но мы собираемся игнорировать троллей, поскольку мы большие поклонники.

Пользовательский интерфейс чистый, отличается эффективным макетом и упрощенной навигацией. Старый интерфейс был загружен, и при долгой работе внутри интеркома он часто казался загроможденным.В Budibase мы считаем, что новый дизайн решает эту проблему и предоставляет пользователям успокаивающий интерфейс, которым мы любим пользоваться.

Дизайн —

❤️❤️❤️

Удобство использования —

😻😻😻😻

Творчество —

🌟🌟

4. Буфер

Buffer UI

Buffer — одна из оригинальных платформ для управления социальными сетями. В 2014 году Buffer решил одну из моих самых больших проблем как молодого специалиста по цифровому маркетингу — планирование публикаций в социальных сетях. С тех пор Buffer вырос и совсем недавно разделил свое предложение на 3 продукта.Наряду с новым предложением был новый пользовательский интерфейс.

Buffer использует преимущества основной верхней навигационной панели и дополнительной левой навигационной панели. Это упрощает переход между продуктами и функциями. Пользовательский интерфейс очень чистый и хорошо использует пробелы. Он также прекрасно сочетает цвета бренда во всем пользовательском интерфейсе, придавая ему характер и креативность.

Платформа проста в использовании и с ней приятно работать. Он упрощает планирование публикаций в социальных сетях и предоставляет пользователям прекрасную платформу для составления отчетов для простого анализа.Молодец, Buffer — вы прошли редизайн!

Bonus — Пользовательский интерфейс Buffer «открыт». Посмотрите их репозиторий компонентов пользовательского интерфейса на Github. Они также «открыли исходный код» пользовательского интерфейса для своего инструмента анализа.

Дизайн —

❤️❤️❤️

Удобство использования —

😻😻😻😻

Творчество —

🌟🌟🌟

3. Понятие

Notion UI

Я большой поклонник Notion и заядлый пользователь с 2016 года. Его минималистичный и лаконичный вид дает пользователю чистый холст, свободный от отвлекающих факторов.

Когда я впервые использовал веб-приложение, оно работало медленно и в некоторых случаях не отвечало. Я был не единственным, кто это почувствовал, и в конечном итоге это привело к полной перестройке продукта.

К счастью, восстановление окупилось. Сегодня Notion используют более 1 000 000 пользователей и работают безупречно.

Для меня Notion был выбором номер 1 как лучший образец современного дизайна веб-приложений. Использование смайлов вместо чистого интерфейса невероятно умно и дает пользователю возможности для творчества.

Отличная работа с Notion, которая недавно собрала крошечные 10 миллионов долларов против оценки в 800 миллионов долларов.

Budibase похож на Notion. Обе платформы стремятся предоставить возможности баз данных людям с меньшими техническими возможностями. Фактически, вы могли бы создать платформу, аналогичную Notion, используя Budibase — личный побочный проект соучредителя Budibase Майка.

Дизайн —

❤️❤️❤️❤️

Удобство использования —

😻😻😻

Творчество —

🌟🌟🌟🌟🌟

2.Нетлифай

Netlify UI

Netlify берет сложное и делает его простым.

Netlify предлагает хостинг и серверные решения для статических веб-сайтов.

Мой первый опыт работы с Netlify был в 2017 году. До Netlify я использовал AWS для размещения своих статических веб-сайтов.

В первые 2 минуты использования Netlify я был в шоке. Как мог этот кропотливый процесс, о котором я часто беспокоился, быть таким легким?

Ответ, ДИЗАЙН.

Каждый экран / функция четко объяснены и красиво структурированы.Их таблицы, шрифты и навигация красивы и просты в использовании. Информация предоставляется только тогда, когда это необходимо. В отличие от AWS, вы чувствуете себя комфортно и все под контролем.

В 2017 году я почти уверен, что был лучшим продавцом Netlify. Я разослал его во все мои социальные круги, по возможности воспевая его. Netlify — это, безусловно, лучший пользовательский интерфейс, который я когда-либо испытывал в веб-приложениях — это невероятно.

Дизайн —

❤️❤️❤️❤️❤️

Удобство использования —

😻😻😻😻😻

Творчество —

🌟🌟🌟

1.Mailchimp

Mailchimp UI

Mailchimp стартовал как побочный проект более десяти лет назад. В 2009 году они добавили бесплатную версию, и количество их клиентов увеличилось с 85 000 до 450 000. Сегодня они предоставляют миллионам стартапов / небольших компаний по всему миру простую и красивую маркетинговую платформу (теперь это больше, чем платформа электронной почты, которой она была раньше).

Я был пользователем Mailchimp с самого начала и наблюдал, как они меняли UI / UX за эти годы. Это постоянно становится лучше! В Mailchimp серьезно относятся к дизайну.У них единая структура дизайна на платформе, и их язык дизайна очевиден. Структурные элементы, такие как логотип, цветовая палитра и типографика, делают дизайн обоснованным и последовательным. Это оставляет их дизайнерам простор для самовыражения.

В последнее время пользовательский интерфейс Mailchimp стал более игривым, представляя более чистый интерфейс с выразительными шрифтами (нам нравится шрифт Cooper!) И веселыми иллюстрациями.

Mailchimp в значительной степени полагается на UX-тестирование и предоставляет пользователям невероятно простой в использовании интерфейс.Поддержка Mailchimp ужасна — возможно, поэтому они так много вкладывают в UX — и она работает.

Дизайн веб-приложения

Mailchimp является лучшим в нашем списке и набрал максимальное количество баллов по всем направлениям. Веб-приложение приятно использовать, а дизайн веб-приложения является источником вдохновения для команды Budibase.

Отличная работа Mailchimp за постоянную поставку красивого продукта, на который легко смотреть и даже проще в использовании.

Дизайн —

❤️❤️❤️❤️❤️

Удобство использования —

😻😻😻😻😻

Творчество —

🌟🌟🌟🌟🌟

Надеюсь, вам понравились 5 лучших дизайнов наших веб-приложений и вы вдохновились ими — мы, безусловно, сделали! Мы продолжим обновлять этот пост по мере выпуска новых дизайнов веб-приложений.Если у вас есть какие-либо дизайны веб-приложений, которые, по вашему мнению, должны быть в списке, отправьте нам DM в Twitter и сообщите нам об этом.

Думаете о создании веб-приложения?

Если вы подумываете о создании веб-приложения, я бы начал со следующего:

Как создать веб-приложение

Если вы подумываете о создании веб-приложения, но не знаете, что создать, мы поможем вам. Прочтите следующий вдохновляющий пост:

Идеи Micro SaaS

И если вы ищете инструменты для создания следующего веб-приложения, сократите время разработки, выбрав Budibase.Просто зарегистрируйтесь, используя форму ниже.

,

лучших дизайнов приложений

Победителями в номинации лучших пользовательских интерфейсов приложений года стали:

Комплексные приложения
  • Веб-платформа BondWorks для управления капиталом (BondDesk Group LLC) предоставляет финансовым консультантам оптимизированную систему для торговли активами с фиксированным доходом.
  • Портативный GEN2i (Hottinger Baldwin Messtechnik GmbH, Германия) позволяет пользователям записывать инженерные данные в полевых условиях.
  • OEConnection (OEConnection LLC) позволяет сотрудникам отделов запчастей в автосалонах и ремонтных предприятиях обрабатывать более 6 миллионов операций с запчастями для оригинального оборудования в месяц.
Легкие приложения
  • CycleStreets Mobile (CycleStreets Ltd. и Анна Пауэлл-Смит, Великобритания) помогает велосипедистам планировать безопасные и быстрые маршруты для велосипедных путешествий с использованием картографических данных из краудсорсинга.
  • VitreaTeach (Vital Images, Inc.) — это обучающий инструмент, который пациенты-радиологи и практикующие радиологи могут использовать для сохранения, управления и обмена медицинскими изображениями.
  • Wakelicious (Utopian Army, Нидерланды) — будильник, который будит вас, проигрывая видео на YouTube, отправленные вашими друзьями.
Приложения рабочего процесса
  • Инструмент для планирования климатических действий (Национальная лаборатория возобновляемых источников энергии) помогает организациям сокращать выбросы углерода.
  • eReview (Международный валютный фонд, МВФ) интегрирует сложные бизнес-функции во внутреннюю сеть организации.
  • Программный инструмент самообслуживания Eventbrite (Eventbrite Inc.) помогает организаторам мероприятий организовывать, продавать билеты на мероприятия и управлять ими.Рабочий процесс Create Event , получивший награду, помогает пользователям создать новое событие в онлайн-системе Eventbrite.
  • Инструмент портала предложений продуктов Hobsons CRM (Hobsons, Inc.) позволяет клиентам делать комментарии и предложения.
Многоплатформенные приложения
  • Dixio (Semantix Group SL, Испания) предлагает пользователям возможность многоплатформенного поиска.
  • Highlight (Cohdoo, LLC) позволяет пользователям устройств iOS делать аудиозаписи, отмечать интересные моменты и делиться записями с другими.
  • Клиент Mobile Unified Communication (Verizon Wireless) позволяет бизнес-клиентам связать свои мобильные и бизнес-линии.

В отличие от других наших наград за дизайн, мы решили разделить награду на категории . Бессмысленно судить о небольших потребительских приложениях, которые выполняют одну функцию вместе с огромными корпоративными приложениями, которые манипулируют огромными наборами запутанных данных — такими как 4 миллиона различных облигаций, которыми трейдеры управляют через BondWorks.Приложения рабочего процесса, которые объединяют много шагов или координируют несколько ролей пользователей, по-прежнему имеют разные требования, как и многоплатформенные приложения, которые работают на нескольких устройствах.

Решить большую проблему сложнее, чем решить маленькую проблему. Однако, если ваше приложение делает только одну вещь, лучше было бы действительно, действительно хорошо. Таким образом, критерии полировки более строгие для небольших приложений, чем для корпоративных приложений. С тысячами экранов в некоторых приложениях все они не могут быть идеальными, но поток между экранами и возможность выбора правильной функции для любой конкретной ситуации должны быть отличными.Поэтому вместо того, чтобы сравнивать яблоки и апельсины, мы решили оценить стиль каждого приложения относительно его аналогов и выбрать лучшие дизайны в каждой категории.

То, что мы когда-либо классифицируем радиологическое приложение как «легкое», бросает вызов воображению, но это уместно в случае VitreaTeach, потому что оно фокусируется на одном: позволить резидентам и опытным радиологам управлять изображениями в учебных целях. Мы могли бы даже назвать это Pinterest медицинской науки. Но, конечно, Pinterest сам по себе не будет работать для радиологов — отчасти из-за проблем с конфиденциальностью любой медицинской информации, а отчасти из-за преимуществ, которые предоставляют специфичные для домена функции.

Например, VitreaTeach предлагает специальный доступ к случаям из собственной больницы пользователя и кое-что знает об анатомии и патологии. Интересно, что одна из вещей, которые делают дизайн чище, чем другие медицинские системы, — это простая маркировка, которая обеспечивает большую часть таксономической поддержки изображений. Дизайнеры упростили маркировку после того, как исследования пользователей обнаружили, что полная формальная иерархия таксономии анатомии и патологии добавляет слишком много накладных расходов.

Расширение возможностей человека

Настоящая цель

Software не должна заключаться в простой обработке транзакций в системе, где пользователи являются не чем иным, как операторами данных, которые нажимают необходимые кнопки, чтобы что-то происходило.Скорее, программное обеспечение должно работать над расширением человеческих возможностей, помогая нам преодолевать слабые места и подчеркивая наши сильные стороны.

Для компьютеров жизненно важный способ помочь пользователям направить их внимание на меньшее количество важных проблем вместо того, чтобы перегружать их всеми возможными вариантами. Например, BondWorks изначально отображал 85 атрибутов обращающихся облигаций на экране результатов поиска. Однако анализ журнала поиска показал, что почти три четверти пользователей выполняли поиск только по 10 атрибутам, поэтому экран был переработан, чтобы сосредоточиться на этих атрибутах.

OEConnection проактивно выполняет следующий шаг , когда запасная часть задерживается у производителя: программное обеспечение автоматически переходит к поиску нужной части в инвентаре других дилеров. Традиционно пользователям приходилось выполнять каждый тип поиска отдельно от отдельных областей приложения. Но именно такой подход превращает людей в роботов-переводчиков кнопок; Лучше превратить компьютер в инструмент для решения проблем, который понимает предметную область и позволяет пользователям использовать свой мозг для решения проблем более высокого уровня.

В качестве другого примера, основная функция приложения Highlight — сделать аудиозаписи доступными для поиска, позволяя пользователям добавлять маркер, когда происходит что-то интересное. Для реальных задач — таких как проведение интервью или занятия на уроке иностранного языка — пользователи фактически не узнают, что записывается «что-то интересное», пока это не произойдет. Чтобы приспособиться к этому распространенному сценарию, в приложении есть функция смещения, которая автоматически помещает маркер в запись за определенное количество секунд за до нажатия кнопки.Мгновенное путешествие во времени.

Если говорить более конкретно, Highlight использует гибкость компьютера для улучшения человеческих навыков, беря на себя утомительную работу по перемотке записи, когда пользователи понимают, что что-то интересное должно было быть отмечено. Это снижает когнитивную нагрузку на пользователей и позволяет им сосредоточиться на прослушивании записываемого события, а не на устройстве.

Другой простой способ, которым Highlight расширяет человеческие возможности, заключается в его способности связать изображение с каждой записью.Это особенно просто при проведении интервью, когда пользователи могут сфотографировать собеседника на тот же телефон, который записывает звук. Эти фотографии пригодятся позже при извлечении записей из длинных списков, потому что нашему бедному мозгу часто легче связать интервью с фотографией человека, чем полагаться на текстовое описание.

Мы также заметили тенденцию к тому, чтобы при распределении площади экрана сосредоточить внимание на информации, которая наиболее важна в текущем контексте, при этом отображая меньше хрома пользовательского интерфейса.Больше контента, меньше накладных расходов на приложение.

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

Линейный рабочий процесс и мастера

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

Чтобы ускорить выполнение пользователями нечастых или сложных задач, часто бывает полезно представить линейный рабочий процесс с минимальными нарушениями или альтернативы. Да, отсутствие гибкости может казаться ограничивающим, но может быть быстрее просто выполнить все шаги, вместо того, чтобы думать о том, какие шаги необходимы.Кроме того, цена слишком большой свободы заключается в том, что пользователи должны сами определять порядок шагов — то, что они часто достаточно счастливы, чтобы делегировать компьютеру.

Мастера — это классический подход к линейным рабочим процессам, и несколько успешных приложений включают красиво оформленные мастера. Инструмент планирования климатических действий использует более простой подход, предлагая пронумерованные шаги для руководства пользователями. Ранний дизайн включал этап Перед тем, как начать, , но исследования пользователей показали, что люди его игнорировали.В окончательном дизайне действия до отображаются в разделе Шаг 1: Сбор базовых данных о потреблении энергии . Пользователи просто хотят приступить к работе, поэтому вам нужно проявить некоторую жесткость, если перед началом реальной деятельности потребуется работа по настройке.

Мастера работают не на все. При пользовательском тестировании разработчики Eventbrite обнаружили проблемы с мастером создания новых событий в системе. Поскольку ментальные модели пользователей по настройке нового события не включали всех необходимых шагов, они часто отключались и не завершали работу мастера.Поэтому команда решила вместо этого использовать двухэтапный процесс, в котором пользователи сначала вводили всю информацию, а затем настраивали свои страницы.

При создании линейного рабочего процесса позаботьтесь о том, чтобы не сигнализировал пользователям, что они могут игнорировать последующих шагов — если это не так. Например, после первых 6 шагов рабочий процесс Eventbrite был следующим:

  • Шаг 7. Измените цветовую схему на странице регистрации.
  • Шаг 8: Выберите настройки конфиденциальности.

Может показаться логичным сначала полностью создать объект, к которому будет применяться конфиденциальность, а затем выбрать настройки конфиденциальности.Для некоторых пользователей, однако, шаг 7 сигнализировал, что вся «настоящая» настройка была сделана и что оставшиеся шаги будут несерьезным украшением. Если их не волновал декор или их устраивали цвета по умолчанию, некоторые люди просто останавливались на шаге 7 и никогда не переходили к параметрам конфиденциальности.

Жизнь в экосистеме

Основным трендом среди приложений-победителей является модульный подход к общему взаимодействию с пользователем, при этом основные функции переданы другим приложениям.Дизайнеры соглашаются с тем, что их продукт будет жить в экосистеме других приложений (и веб-сайтов) и что пользователи часто предпочитают делать определенные вещи где-то еще в этой экосистеме.

Использование других приложений для выполнения работы для вашего приложения, очевидно, не новость. Совместная работа приложений возвращается, по крайней мере, к конвейерам в Unix. Но сейчас мы видим, что это делается чаще, чем в прошлые годы, когда был распространен более монолитный подход.

Если вы не IBM или Google, вы никогда не создадите электронную таблицу, которая составит конкуренцию Excel.Более того, большинство бизнес-пользователей уже владеют Excel и знают, как его использовать. Таким образом, вместо того, чтобы встраивать в приложение функции, подобные электронным таблицам, может быть лучше найти простой способ интеграции с Excel посредством экспорта и импорта данных. Многие из наших победителей выбрали этот курс.

В качестве другого примера, Wakelicious не реализовал полную систему для загрузки и хранения видео для воспроизведения в Интернете. Вместо этого он предлагает простую интеграцию с YouTube , что не только избавило команду от огромных усилий по разработке, но также дает пользователям доступ к предварительно заполненной библиотеке контента, из которой они могут выбирать будильники для отправки своим друзьям.

Одно предостережение относительно использования другого программного обеспечения заключается в том, что часто лучше всего изменить или упростить пользовательские интерфейсы в соответствии с потребностями ваших пользователей; из-за своей более широкой сферы применения стороннее программное обеспечение часто воплощает ненужную сложность, которую лучше скрыть. eReview, например, построен на базе SharePoint, но имеет более упорядоченный процесс, чем тот, который предоставляется в стандартной комплектации.

Хотя использование существующих приложений и Интернет-ресурсов — это замечательно, приложения также должны обеспечивать свою собственную добавленную стоимость в своей основной области .Наиболее наглядно это продемонстрировал Инструмент планирования климатических действий, который фактически начинался как обычная электронная таблица Excel, которая могла выполнять необходимые вычисления. Превращение его в реальное приложение, которое поможет руководителям предприятий через рабочий процесс, а также объяснит и проиллюстрирует сложные концепции, связанные с сокращением выбросов CO2, сделало этот опыт более успешным.

Супер-всплывающие подсказки: техника года в области интерактивного дизайна

На выставке Application Design Showcase # 1 мы объявили лайтбокс лучшим методом интерактивного дизайна года.На этот раз мы увидели улучшения в широком спектре методов взаимодействия, но ни одного нового виджета, который бы широко использовался, не было.

Однако несколько приложений усовершенствовали старую идею: всплывающую подсказку. Эти «супер» всплывающие подсказки выходят далеко за рамки их первоначального предназначения и, таким образом, заслужили место как наиболее усовершенствованный метод дизайна взаимодействия за год. Появившиеся в 1990-х годах всплывающие подсказки (или «пузырьковая справка») начинались с предоставления небольших пояснительных текстов, которые появлялись как контекстная справка, когда пользователь указывал на командную кнопку или другой элемент интерфейса.

Новая супер-всплывающая подсказка на самом деле не является «подсказкой», но мы будем придерживаться этого хорошо зарекомендовавшего себя названия с его долгой историей разработки графического интерфейса. Всплывающая подсказка на самом деле представляет собой пояснительное всплывающее окно, которое появляется как эффект наведения курсора, когда пользователи указывают на элемент в пользовательском интерфейсе. Этим «элементом» может быть команда или кнопка, как в случае с традиционными всплывающими подсказками, но это также может быть созданный пользователем объект, например сообщение или заказ продукта. На следующем снимке экрана показан типичный визуальный дизайн супер-всплывающей подсказки:

Пример супер-всплывающей подсказки от Eventbrite.

Помимо статического текста справки, супер-всплывающие подсказки обычно содержат динамическую информацию о состоянии объекта, на который указывают пользователи. Это позволяет пользователям видеть информацию в контексте большего обзорного экрана, вместо того, чтобы переходить на отдельный экран с подробными свойствами объекта и параметрами редактирования. Таким образом, супер-всплывающие подсказки особенно подходят для сложных приложений с множеством объектов данных, которые пользователи должны рассматривать вместе.

Всплывающая подсказка не должна включать параметры редактирования; это должно быть только для информации, поскольку оно появляется при наведении курсора и исчезает, когда пользователь перемещает мышь.Пользователи также должны сохранить возможность перехода на конкретный экран, оптимизированный для более детального просмотра и изменения свойств объекта.

Все приложение Dixio можно рассматривать как еще более расширенную всплывающую подсказку. Однако это не совсем точно, потому что объяснения Dixio появляются, когда пользователи дважды касаются (или долго касаются) слова. Таким образом, это не эффект опрокидывания / наведения, и его следует явно исключить.

Методы удобства использования

Большинство победителей широко использовали различных методов удобства использования , что, безусловно, является одной из причин, по которой они получили такие хорошие пользовательские интерфейсы.Итерационный дизайн и пользовательское тестирование были особенно распространены и часто использовались для уменьшения сложности по сравнению с ранними дизайнерскими идеями, которые казались хорошими, но оказались слишком сложными. Другой распространенной тенденцией было неуклонное сокращение объема документации и справочного текста на протяжении итераций, поскольку пользовательское тестирование неоднократно выявляло старый урок, который пользователи не очень-то читают.

Простое пользовательское тестирование с небольшим количеством пользователей часто может существенно улучшить успех продукта, и его использовали в 85% проектов-победителей.Например, в ранней версии клиента Mobile Unified Communication использовалась команда Добавить вызов для выполнения нового телефонного звонка при удержании текущего абонента. Хотя это кажется достаточно логичным, это сбивало с толку пользователей, которые думали, что команда предназначена для конференц-связи. Изменение метки команды на New Line помогло.

Треть победителей использовала полевых исследований (также известных как этнография ), рискнув выехать на место, чтобы понаблюдать за естественным поведением пользователей в их собственной среде.От BondWorks, сидящего с брокерами во время заключения сделок, до OEConnection, работающего в отделах запчастей в дилерских центрах, до VitreaTeach, наблюдающего за радиологами в больницах, — предметно-ориентированные приложения требуют предметных исследований пользователей.

Хотя кажется очевидным, что предметно-ориентированные приложения нуждаются в полевых исследованиях, большинство дизайн-проектов в прошлом обычно обходились без них. Когда мы проанализировали первое десятилетие победителей конкурса Intranet Design Annual, мы обнаружили, что полевые исследования использовались только 10% победителей в 2001–2003 годах и только 23% победителей в 2007–2009 годах.Хотя это представляло собой более чем удвоение за одно десятилетие, все же грустно, что менее четверти хороших команд в интранете проводили полевые исследования к концу десятилетия. Переход от четверти проектов к трети за несколько лет свидетельствует о постоянном прогрессе в этом важном методе.

В дополнение к полевым исследованиям, мы также увидели существенный рост в использовании метода юзабилити, на который в прошлом часто не обращали внимания: сидел на звонках в службу поддержки . Знание, почему клиенты звонят с проблемами, — это лучший способ обнаружить болевые точки, если вы понимаете, что описание проблемы клиентом может быть далеко от основной причины, которую необходимо устранить при редизайне.

(Полный отчет со всеми отмеченными наградами проектами приложений доступен для загрузки.)

,

новейших вопросов о дизайне приложений — Stack overflow на русском

Переполнение стека
  1. Товары
  2. Клиенты
  3. Случаи использования
  1. Переполнение стека Общественные вопросы и ответы
  2. Команды Частные вопросы и ответы для вашей команды
  3. предприятие Частные вопросы и ответы для вашего предприятия
  4. работы Программирование и связанные с ним возможности технической карьеры
  5. Талант Нанять технических талантов
  6. реклама Обратитесь к разработчикам по всему миру
,

Витрина дизайна приложений: 2012 | Отчет NN / g

В этом отчете рассматривается дизайн и удобство использования 13 приложений, которые были выбраны из гораздо большего числа представленных дизайнов. Отчет на 304 страницах богато иллюстрирован 228 полноцветными снимками экрана , что дает читателям уникальную возможность увидеть хорошие пользовательские интерфейсы из узкоспециализированных приложений, которые обычно недоступны для широкой публики.

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

Темы

Узнайте, что делают победители

  • Дизайн приложений для разных категорий пользователей
  • Сделать главные задачи очевидными для всех
  • Представление различных вариантов и представлений для удовлетворения потребностей
  • Несколько путей
  • Настройки и индивидуальная настройка
  • Мастера
  • Связанные элементы управления
  • Загрузка или отправка данных в другое приложение для просмотра и управления
  • Максимально эффективное использование ограниченного пространства
  • Защитные сетки
  • Справка (встроенная)

Лучшие практики разработки приложений

  • Прогрессивное раскрытие
  • Диалоговые окна
  • Лайтбоксов
  • Modal vs.немодальные диалоги
  • Сообщения об ошибках
  • Текст справки и вспомогательные материалы для пользователя
  • Контекстная помощь
  • Подсказки
  • Супер-всплывающие подсказки
  • Индикаторы прогресса
  • Режимы и немодальные взаимодействия
  • Уведомления об изменении статуса
  • Выбор
  • Формы
  • Панели инструментов
  • Иконки
  • Пуговицы
  • Кнопки переключения
  • Метки и имена команд
  • Расширяемые и сворачиваемые диалоговые элементы
  • Вкладки
  • Представляем особенности комплекса
  • Мастера
  • Linear vs.поток задач произвольной формы
  • Всплывающие сообщения
  • Информация о наведении / всплывающие подсказки
  • Панели приборов
  • Развертка
  • Фильтрация
  • Искать
  • Предупреждения
  • Настройка
  • Сбор данных
  • Метаданные
  • Мобильные приложения
  • Приложения для планшетов
  • Мобильные версии приложений для ПК
  • Многоплатформенные приложения
  • Визуальный стиль
  • Цветовое кодирование сложных данных
  • Визуализация данных
  • Диаграммы и графики
  • Аудио
  • Навигация по приложениям
  • Ссылки нижнего колонтитула
  • Порталы
  • Инновационный контроль: когда отказаться от принятых стандартов
  • Zoom
  • Карты
  • UI для ресурсов реального времени
  • Создание на основе SharePoint
  • Сотрудничество
  • Юзабилити-процесс разработки приложений

Выигрышные приложения

Комплексные приложения

  • Платформа управления капиталом BondWorks (BondDesk Group LLC), система, в которой финансовые консультанты торгуют активами с фиксированным доходом.
  • GEN2i (Hottinger Baldwin Messtechnik GmbH, Германия), портативное устройство для записи инженерных данных в полевых условиях.
  • OEConnection (OEConnection LLC) позволяет отделу запчастей автосалона обрабатывать сделки с запчастями оригинального оборудования.

Легкие приложения

  • CycleStreets Mobile (CycleStreets Ltd. и Анна Пауэлл-Смит, Великобритания) помогает велосипедистам планировать безопасные и быстрые маршруты для велосипедных поездок с использованием картографических данных из краудсорсинга.
  • VitreaTeach (Vital Images, Inc.), обучающий инструмент для врачей-радиологов, позволяющий сохранять медицинские изображения, управлять ими и делиться ими.
  • Wakelicious (Утопическая армия, Нидерланды), будильник, который будит вас, проигрывая видео на YouTube, отправленные вашими друзьями.


Приложения рабочего процесса

  • Climate Action Planning Tool (Национальная лаборатория возобновляемых источников энергии) помогает организациям сокращать выбросы углерода.
  • eReview (Международный валютный фонд, МВФ), приложение для внутренней сети, которое объединяет сложные бизнес-функции.
  • Eventbrite (Eventbrite Inc.), программный инструмент самообслуживания, используемый организаторами мероприятий для организации, продажи и управления билетами на мероприятия.
  • Hobsons CRM product (Hobsons, Inc.), инструмент портала предложений продуктов, где клиенты могут оставлять комментарии / предложения.


Многоплатформенные приложения

  • Dixio (Semantix Group SL, Испания), мультиплатформенная технология поиска.
  • Highlight (Cohdoo, LLC) позволяет пользователям устройств iOS делать аудиозаписи, отмечать интересные моменты и обмениваться записями.
  • Клиент
  • Mobile Unified Communication (UC) (Verizon Wireless), позволяет бизнес-клиентам связывать телефонные номера со своим мобильным телефоном.
,

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *