Общие принципы в создании мобильных приложений для начинающего UX/UI-дизайнера

  • Tutorial


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

Обучение (Onboarding)


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

Ещё они нужны, когда выходит классное обновление в приложении, и грех его не выделить.


Яндекс.Транспорт рассказывает о новых фишках.

Среднее количество слайдов 3-4, больше читать неинтересно.



Методические рекомендации (guidelines)


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

Например, в iOS основное меню находится снизу в Tab bar, а в Android –– это боковое меню.



Пример отображения экрана на iOS и Android.

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

Шрифт (iOS)


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



В принципе, разница не раздражает, а кому-то и совсем не видна.

Элементы (iOS)


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

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



Один экран на разных разрешениях.

Nothing


Красота в деталях. Особенно приятно, когда в приложении продуманы все мелочи: что делать, если контента пока нет? Не загрузился? Загрузилась часть? Отвалился интернет? Всё это необходимо отрисовать и отдать разработчику, иначе он всё сделает за вас.

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

Шрифт (android)

Недавно я столкнулась с тем, что в Аndroid каждая компания задает свой шрифт, т.е. может получиться такая ситуация, что в модели нет шрифта roboto. Или пользователь установил свой шрифт в смартфоне (рукописный или др.). Что делать в этом случае? Идеальная картина на nexus, это слишком маленький процент, чтобы ориентироваться только на него.



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



А ещё можно встретить вот такие баги.

Элементы (Android)


Здесь ситуация ещё интереснее, чем в iOS. Размеров смартфонов даже в одной ветке (XH, например) много, и сделать на всех устройствах идеально невозможно. Но может помочь выработка принципа отображения элементов. Как вариант, выяснить для себя, что отображение функций на экране девайса 2:1 и передать эту информацию разработчику.



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

Пожалуйста, любите детали!

Вы знали, что клавиатуру в iOS по-хорошему сворачивать нельзя, если она появляется по умолчанию, а в Android можно? И тогда остается пустое, незаполненное пространство.

Если у вас остались вопросы или вы считаете иначе, то я буду рада пообщаться с вами! И спасибо вам за ваши комментарии!
Мой e-mail: le.ktrna@gmail.com
e-Legion Ltd. 78,55
Лидер мобильной разработки в России
Поделиться публикацией
Похожие публикации
Комментарии 23
  • +3
    И тогда остается пустое, незаполненное пространство.

    вселенская проблема дизайна – Заполнить Пространство.
    • 0
      Природа боится пустоты (С) Аристотель
      • +1
        Когда эта фраза вырвана из контекста, то да!
        «Вы знали, что клавиатуру в iOS по-хорошему сворачивать нельзя, если она появляется по умолчанию, а в Android можно? И тогда остается пустое, незаполненное пространство.»

        В этом контексте я не имела в виду, что это плохо. Но честно, при проработке макетов, я не учитывала это пункт и пропускала мимо, а это неправильно. И решила, что кто-нибудь делает так же, хотя не стоит :)
        • +1
          всё равно, экранную клавиатуру в iOS можно в любой момент свернуть и развернуть, используя хардварную bluetooth клавиатуру
      • +3
        Алан Купер в своей книге «Об интерфейсе» писал о необходимости проектирования интерфейсов для середнячков. А что делать с новичками? Делать их середнячками.

        А то Onboarding.
        • +5
          Я вот вообще не в UX/UI, но позволю себе откомментировать. Возможно текст ниже является эффектом Даннинга — Крюгера:

          * Обучение (Onboarding)
          Бесполезно. Во-первых, никто не читает эти слайды, во-вторых они мешают добраться до приложеньки, в-третьих — воспринимаются не как обучение, а как реклама:
          «Ваши файлы в безопасности» — очень «полезный» «совет»

          Если внимательно посмотреть и прочитать ваши примеры — согласно вашим же принципам UX/UI это все должно быть видно и доступно. Если оно не видно — пользователь не найдет, если оно видно — зачем талдычить одно и то же?
          Совместный доступ — просматривайте и редактируйте файлы вместе с коллегами и друзьями.


          * Методические рекомендации (guidelines)
          Итак, прежде чем делать приложение одной компании, стоит посмотреть, как оно реализовано у других.

          Может не у других, а в guidelines все-таки? И, уж простите, совет на уровне КО

          Смысл совета про Шрифт (iOS) я не вообще не понял. Ну разные немного и что?

          Про андроид тоже — так надо зашивать или везде использовать дефолтный?

          И последний совет, видимо опечатка:
          Но может помочь выработка принципа отображения элементов. Как вариант, выяснить для себя, что отображение функций на экране девайса 2:1 и передать эту информацию разработчику.


          Остальные более-менее похожи на принципы, как то: «Использовать прилипающую кнопку в дизайне не стоит.», «Предусматривать отсутствие контента», но, мне кажется, все-таки 2 принципа для статьи это как-то маловато.
          • +4
            Агрессивная «дружественность» интерфейса последнее время просто дико бесит!
            Скачал обновление приложения для банкинга, и теперь оно после запуска и логина рисует мне какие-то дурацкие картиночки «солнце-море-горы» с приветствием «Здравствуйте, Роман! Приятного Вам дня!» — вот именно этого мне в приложении для банковских операций и не хватало!

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

              Надеюсь, что всё же ваши пожелания будут учтены и эту функцию будет возможно убрать в настройках :)
              • +3
                Я тоже хотел бы, чтобы дизайнеры и программисты помнили, что еще не все люди, которые работали с Windows 3.11, вымерли. То есть я хочу сказать, что некоторым ПРИЯТНО ДУМАТЬ, а не только ПОЛЬЗОВАТЬСЯ.
                • +1
                  Агрессивная «дружественность» интерфейса последнее время просто дико бесит!


                  Поддерживаю. Я не хочу разговаривать с роботом. Это наводит на мысль, что компьютер думает сам. А что, если он деньги не на тот счет переведет?
                  • +3
                    Тут недавно писали о людях с нарушениями цветовосприятия. Эта болезнь известна давно и неплохо изучена. Но давайте также не забывать о людях, у которых самые разные (в том числе — легкие, а потому часто остающиеся без формального диагноза) степени расстройств аутического спектра. Напомню, что это не обязательно те, кто не разговаривает или все время сидит и качает из стороны в сторону. Это еще и множество тех, чье состояние называют HFA, и кто обладает обостренным восприятием деталей (в том числе — тех самых шрифтов), чувствителен к нарушениям единообразности, симметрии и так далее. А также — к попыткам «задружиться» с ними, которые такие люди считают вторжением в их личное пространство или банальным обманом — ведь приложение не является мыслящим и чувствующим, а потому всякие приветствия и т.п. — это попытка обмануть пользователя, создав у него впечатление, что о нем кто-то заботится и так далее, хотя это всего лишь железка и программа. Если такая заставка работает только во время загрузки — это еще ладно, а если она отнимает время между какими-то действиями, эффект для таких людей противоположный желаемому, они чувствуют, что у них пытаются украсть время и заставить их смотреть какую-то бесполезную хрень. Это злит их и способно сподвигнуть не только на то, чтобы отказаться от приложения, но и объяснить другим, кого они знают, какая это дрянь и обман. А «сухость» для них — это порядок, а не что-то плохое.

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

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

                  Может не у других, а в guidelines все-таки? И, уж простите, совет на уровне КО
                  Да, действительно, думаю вы правы. На этот счет есть так же хорошая статья: vc.ru/p/ui-design-yalantis

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

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

                    Может не у других, а в guidelines все-таки? И, уж простите, совет на уровне КО
                    Да, действительно, думаю вы правы. На этот счет есть так же хорошая статья: vc.ru/p/ui-design-yalantis

                    Спасибо за комментарии! Доработать нужно действительно много :)
                    • +1
                      Никто не читает. Особенно, если когда-то уже устанавливал приложение, потом удалил и опять поставил. Или когда установил почтовую программу, чтобы прочитать почту, она запросила аккаунт и потом начала крутить эти слайды. Бесит. Еще особый маразм — чейнджлоги. Открываешь дайлер, например, а он тебе вместо кнопок «What's new»
                  • +5
                    Мне одному кажется что на иллюстрации Борис Ельцин что-то спрашивает у оператора ЭВМ? :)
                    • 0
                      Как-то пропущен важный момент про планшеты и смену вёрстки при смене ориентации экрана с portrait на landscape
                      • +1
                        Кто автор первого изображения?
                      • 0
                        И про анимацию бы пару слов сказать.
                        Микровзаимодействия и соответствие ожиданиям.
                        Собрал у себя небольшую подборку классных примеров — elikov.ru/best-ux-ui-animation.html
                        • 0
                          Последние 4 ваши сообщения содержат ссылку на ваш сайт. Уж не спам ли это?
                          • 0
                            Прошу прощения, если так выглядит. Вам не понравились примеры? Мне кажется там есть очень оригинальные работы.
                            Собственно, ищу, реальные проекты, где кто-то реализовывал такие штуки.
                            Есть ли реальная потребность в такой анимации или достаточно микровзаимодействий.
                            • 0
                              Прошу прощения, если так выглядит. Вам не понравились примеры?

                              Нет, просто сработал автоматический антиспам- фильтр ))

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

                        Самое читаемое