Создание приложений под ios: 4 правила, которые стоит нарушить

Posted on by riasevastopol

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

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

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

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

  • Управление страницами: точки, показывающие число страниц;
  • Кнопка отправки формы вверху окна;
  • Значок плюс (+);
  • Значок «Переместить» (Move).

uСоздание приложений под ios: 4 правила, которые стоит нарушитьl

  • Неприятности юзабилити в iOS 9: кнопка «Back»

    • 1. Управление страницами

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

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

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

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

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

    Так, не следует надеяться на них как на главную навигационную подсказку.

    В приложении Stock Market HD Stocks and Shares единственной навигационной подсказкой являются чуть заметные точки внизу экрана. Кроме этого присутствует меню в правом верхнем углу, открывающее дополнительные возможности доступа к контенту.

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

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

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

    Приложение The Fab для Android заимствует подход iOS, но размещает их в правой части окна, а не по центру.

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

    Вместо этого рекомендуется:

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

    В iOS App Store отсутствуют точки навигации. Возможность свайпинга посоветована обрезанными иконками с правой стороны.

    • какое количество стоить скопировать популярное приложение?

    2. Кнопка отправки данных (либо эквивалент) вверху окна

    В iOS кнопка Done отображается сверху. Время от времени кнопка отправки формы (она возможно названа «Послать» либо «Забронировать места») кроме этого размещается сверху. Эта тенденция уже начала просачиваться и в Android.

    Календарь для iOS (слева): кнопка Add в правом верхнем углу панели навигации, воображает форму. Todoist для Android заимствует «яблочный» дизайн и помещает в правый верхний угол кнопку Submit.

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

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

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

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

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

    Словом, значительно лучше будет размещать СТА-кнопку под формой сбора данных, а не в панели навигации.

    • А нужен ли режим мультизадачности на мобильных устройствах?

    3. Значок плюс (+)

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

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

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

    К примеру, прошлая версия приложения Any.do отображала «Плюс» рядом с панелью перечней. И в этом случае неясно, что случится по нажатию элемента: отображение пункта подпунктов и раскрытие списка, либо же добавление нового пункта в перечень дел.

    Следующая версия Any.do сделала функционал более интуитивно-понятным

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

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

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

    Все это очень сильно путает пользователей и ухудшает юзабилити.

    Избегайте хаотичного и бессистемного применения элемента «Плюс», так как его значение интерпретируется пользователями по-различному в зависимости от контекста и расположения.

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

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

    • Навигация мобильных приложений и сайтов: базисные правила юзабилити

    4. Иконка перемещения

    Move icon, либо иконка перемещения

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

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

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

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

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

    Слева — значок Move, справа — иконка-«гамбургер»

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

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

    Кроме этого не следует применять иконку-«гамбургер» без пояснений. Слово «Меню» рядом, либо кроме того вместо элемента, избавит пользователей от лишней путаницы.

    • Мобильный юзабилити: ограничения и возможности

    Вместо заключения

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

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

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

    Высоких вам конверсий!

    По данным: nngroup.comImage source: *M-CAM

    Случайные статьи:

    Разработка приложений для IOS на Swift в Xcode. Как разрабатывают приложения для IOS на Swift?


    Подборка похожих статей:

    riasevastopol

    More Posts