Поскольку все больше людей начинают ежедневно использовать мобильные приложения, для компаний во всем мире сейчас как никогда важно уделять пристальное внимание разработке собственных мобильных приложений, будь то iPhone, Android или Blackberry. Однако иметь мобильное приложение не самая простая работа. Существует множество приложений, которые отлично работают, но не выглядят так замечательно. Это важно, потому что привлекательный, удобный для пользователя интерфейс является основным методом привлечения и удержания пользователей.
К сожалению, множество приложений для iPhone страдают от не звездного дизайна. В этой статье будет рассмотрен дизайн косметики популярного торгового приложения Amazon UK. Мы рассмотрим, чего не хватает в дизайне и как его можно улучшить, на примерах из других приложений. Советы и рекомендации по всей статье покажут, как применять эти рекомендации на практике, а также ссылки на другие замечательные источники, которые помогут вам узнать больше.
Если вы найдете эту статью полезной, пожалуйста, сообщите нам об этом в комментариях ниже, и мы определенно сделаем больше в будущем!
Представляем приложение Amazon UK
Прежде всего, давайте начнем с небольшого введения в приложение Amazon UK . Как вы, скорее всего, и ожидаете, это приложение, позволяющее жителям Великобритании искать и покупать товары, перечисленные на Amazon UK, прямо из приложения для iPhone без использования веб-браузера. Как описано в магазине приложений:
Приложение Amazon Mobile позволяет владельцам iPhone и iPod touch очень быстро искать, делать покупки, сравнивать цены, читать отзывы и совершать покупки на Amazon.co.uk с помощью простого, но элегантного интерфейса.
Зачем просматривать приложение Amazon UK?
Я использую приложение Amazon UK время от времени. Я не частый пользователь, но я им пользуюсь. Приложение работает, оно делает то, что должно, но интерфейс мог бы быть гораздо лучше. Макет иногда кажется тесным, нет возможности просматривать магазин, и все, кажется, было эстетически смешано и совпало с общим отсутствием визуальной согласованности между экранами.
Amazon UK: углубленный интерфейс
Давайте начнем, не так ли? Я сделал серию снимков экрана на различных страницах приложений, включая домашнюю страницу, страницу поиска, страницу входа, страницу рекомендаций, страницу списка пожеланий, страницу настроек учетной записи, страницу справки, страницу правовой информации, страницу продукта, изображения страница и, наконец, отзывы и страницы описания товара.
Добро пожаловать / Главный экран
Экран приветствия / начальный экран — это первый экран, который вы увидите при открытии приложения. Нам представлен логотип Amazon, простой заголовок с надписью «Добро пожаловать» и несколько кнопок, направляющих нас в ваш список пожеланий и Amazon Remembers, популярные на Amazon UK продукты, а также возможность войти в свой аккаунт, если вы существующий клиент.
Основным способом навигации по приложению является использование панели вкладок в нижней части экрана, позволяющей получить доступ к различным областям приложения, таким как домашняя страница, поиск, корзина и экран запоминаний. Также есть кнопка «еще», которая позволяет вам отслеживать ваши пакеты, просматривать ваши заказы и изменять настройки вашего аккаунта (вы можете увидеть этот скриншот ниже).
выше: домашний экран Amazon UK
Как упоминалось ранее, приложение работает отлично. Домашний экран относительно прост в использовании, но я считаю, что это может быть намного проще. Вот несколько моментов, которые следует учитывать, за каждым отдельным пунктом следуют некоторые примечания, которые могут улучшить пользовательский интерфейс.
Действительно ли необходимо заменить панель навигации с логотипом Amazon.co.uk? Это не относится ни к одному из других экранов, и поэтому создает ощущение совершенно другого приложения.
Вместо этого логотип можно заменить простой «стандартной» панелью навигации, кнопкой входа в систему или даже несколькими вариантами просмотра популярных продуктов, вашего списка пожеланий или ссылки на Amazon Remembers. Это освободило бы много места на главной странице, оставив место для размещения новых продуктов или даже сведений о ваших последних заказах. Там будет более чем достаточно места для размещения логотипа Amazon на главном экране, если используется панель навигации.
Панель вкладок связана с четырьмя основными экранами: дом, поиск, корзина и запоминает. Запоминает это услуга, которая, насколько я знаю, не так уж и часто используется. Действительно ли оно заслуживает места на главной панели вкладок и ссылки на главной странице?
Эту ссылку можно довольно легко поместить на вкладку «больше» и заменить ее чем-то, что клиенты будут использовать с большей вероятностью, например, функцией просмотра, позволяющей пользователям просматривать различные категории на сайте Amazon, вместо того, чтобы искать то, что они хотят, функция, которая ничего не делает, кроме увеличения продаж, и делает приложение тем, которое люди будут использовать гораздо чаще.
Самой большой ошибкой пользовательского интерфейса на передней панели должна быть строка поиска. Будучи пользователем, который использовал множество приложений для iPhone, первое, что вы ожидаете, нажимая на текстовое поле поиска Amazon.co.uk, — это всплывающая клавиатура … введите результаты поиска и нажмите кнопку «Перейти». , В этом случае именно этого не происходит. Вместо этого он просто связывает вас непосредственно с экраном поиска. Это действительно необходимо?
Простой ответ на это большой жирный нет. На самом деле нет необходимости в двух поисковых ссылках на одной странице, особенно если найти их на панели вкладок очень просто. Если бы панель поиска на главной странице действительно работала, это было бы другое дело, но поскольку это фактически изображение с прикрепленной ссылкой, это бессмысленно! Если убрать это, то осталось бы гораздо больше места для логотипа Amazon в верхней части главного экрана и навигационной панели вверху!
Популярные «популярные» продукты на первой странице приложения кажутся очень тесными. В качестве примера рассмотрим правую сторону Playstation 3 Slim и левую часть альбома Muse, расстояние между двумя изображениями очень узкое и, как правило, приложение выглядит немного невзрачным.
Некоторые изображения меньшего размера с небольшим дополнительным интервалом отлично подойдут для этого, позволяя каждому изображению дышать. Тем не менее, после исчезновения панели поиска и ссылок на Список пожеланий и Amazon Remembers останется много свободного места, возможно, оставляя возможность добавлять товары в более прохладный и более стильный способ, например, эскизы, разработанные специально для Первая полоса, а не просто изображения самого продукта. Мы все знаем, что изображения говорят больше, чем слова, поэтому сделайте изображения как можно лучше, даже если это потребует немного больше работы.
Применение этих принципов на практике сделает приложение более удобным для пользователя. Ниже приведено аннотированное изображение официального магазина приложений для iPhone:
выше: магазин приложений Apple
Здесь вы можете увидеть вкладки вверху и внизу каждой страницы, которые обеспечивают гораздо более легкий доступ к каждому экрану, что прекрасно работает с приложением Amazon UK, а также значительно упрощает поиск определенного продукта пользователем или просто, как правило, просматривать магазин.
Экран поиска
Там нет абсолютно ничего плохого с функцией поиска в этом приложении. Есть панель поиска, рекомендации по поиску при вводе в строку поиска и список продуктов в конце, как и следовало ожидать.
Существует возможность уточнить ваш поиск после того, как вы сделаете свой первоначальный поиск, хотя вы не можете уточнить все это слишком сильно — только в какой категории вы хотите искать, чего на самом деле недостаточно для магазина, который продает сотни и тысячи разных продуктов в день.
выше: экран поиска Amazon UK
Действительно ли эта функция поиска достаточно продвинута для одного из самых известных в мире интернет-магазинов?
От поиска по сайту я обнаружил, что довольно раздражает то, что вы не можете уточнить свои параметры вплоть до того, что вы хотите. Поиск можно сделать намного проще! У нас должна быть возможность уточнить наш поиск по категориям, подкатегориям, цене, состоянию товара (новое или подержанное) до нажатия кнопки «Перейти», а также возможность отображать результаты в разных заказах, таких как цена или дата. выпуска В 99% интернет-магазинов есть простые вещи, так почему бы не использовать приложение для iPhone?
Это легко исправить, однако. Вам просто нужно взглянуть на экран поиска eBay, чтобы понять, что я имею в виду (обратите внимание, что это до того, как вы сделаете свой начальный поиск, а не после, как в приложении Amazon UK!):
выше: приложение eBay UK
Экран входа
Экран входа в систему практически безупречен с точки зрения удобства использования, вы можете войти в систему, сообщить Amazon, что вы забыли свой пароль, и создать новую учетную запись.
выше: Amazon UK вход на экран
Стиль, однако, кажется немного странным. Внимательно посмотрите на радиус углов в полях адреса электронной почты и пароля, а затем посмотрите на радиус углов на кнопке входа. Вы можете ясно видеть, что это не то же самое.
Изменение этого параметра таким образом, чтобы радиус кнопки был одинаковым, очень помог бы в том, как выглядит пользовательский интерфейс. Регулировка ширины кнопки в соответствии с шириной текстовых полей также поможет, а центрирование текста в кнопке будет выглядеть как можно более плавным. Именно такие вещи делают ваши дизайны популярными!
Говоря о кнопках входа в систему, действительно ли она вообще нужна? Минимализм сейчас является огромной тенденцией дизайна по нескольким очень простым причинам: он выглядит великолепно и очень прост в использовании.
Кнопка может быть полностью удалена, при этом кнопка входа будет расположена на панели навигации над экраном. Другая ссылка может быть размещена на странице для других параметров входа, таких как ссылки на страницы, где вы можете запросить новый пароль или создать новую учетную запись. Одним из превосходных приложений, которое делает это хорошо, является официальное приложение Twitter (ранее Tweetie), как можно увидеть ниже:
выше: приложение Twitter для iPhone
Экран рекомендаций
Экран рекомендаций — довольно важная функция Amazon, поскольку он позволяет пользователям находить новые продукты, о которых они, возможно, не знали ранее, на основе их предыдущих поисков, покупок и товаров в их списке пожеланий.
На экране отображается список продуктов точно так же, как они будут отображаться в результатах поиска.
выше: страница рекомендаций Amazon UK
Несмотря на то, что это работает очень хорошо, иногда это может показаться немного тесным, особенно когда речь идет о длинных заголовках или если указано несколько имен авторов или директоров.
Эти списки продуктов можно было бы привести в порядок, используя только эскизы и только эскизы. Если продукт выглядит так, как если бы он мог представлять интерес, пользователь может щелкнуть по нему, чтобы раскрыть дополнительную информацию о продукте, такую как название, цена и рейтинг.
Отличным примером того, как это может работать, является новая структура папок, представленная в iOS4, которая позволяет вам изо всех сил раскрывать, что находится внутри папки. Ниже приведен пример структуры папок.
выше: структура папки iOS4
Экран правовой информации
Это худший экран приложения Amazon UK. Если бы я сказал вам, что практически никто не просматривает этот экран, я, вероятно, был бы прав, но только потому, что это экран, который не просматривается слишком часто, не означает, что он должен страдать от качества дизайна. Экран ссылается на две другие страницы: «Условия использования и продажи» и «Уведомление о конфиденциальности».
выше: страница юридической информации Amazon UK
Я не могу не подчеркнуть, насколько важно сохранять одинаковый стиль в приложении. То же самое относится к веб-сайтам, журналам, газетам, брошюрам … на самом деле все, что принадлежит компании, должно иметь некоторое сходство друг с другом — это просто хороший брендинг. Если вы хотите, чтобы вас узнали, вам нужно это сделать.
Этот экран юридической информации просто использует основную текстовую ссылку на другие источники, хотя на других экранах используются кнопки iPhone по умолчанию (как видно в меню настроек вашего iPhone).
Это очень простое исправление дизайна, и экран может быть значительно улучшен, чтобы соответствовать остальной части приложения!
Экран страницы продукта
Экран страницы продукта — это страница, полная кратких сводок, позволяющая пользователю решить, является ли этот продукт для них или нет. Если это так, у них есть возможность выбрать любой раздел со стрелкой и просмотреть больше фотографий, узнать больше о продукте, просмотреть больше использованных предложений и прочитать отзывы клиентов.
выше: страница продукта Amazon UK
Страница продукта в целом работает отлично, но ее просто нет. Страница выглядит тесной и сжатой, и в целом явно не уделяется много внимания мелким деталям, которые очень важны!
На многих других экранах приложений Amazon UK мы видели закругленные углы, например на домашнем экране. Это занимает немного больше места, но делает пользовательский интерфейс намного удобнее и удобнее в использовании. Использование той же техники для экрана страницы продукта сразу улучшит его.
Одна вещь, которая отсутствовала во всем приложении, но особенно хорошо работала бы на этой странице, это отсутствие тонких теней / штрихов. Интерфейс iPhone использует их регулярно — вам нужно только взглянуть на заголовок в навигационной панели в верхней части приведенного выше изображения, чтобы понять, что к тексту была применена внутренняя тень.
Добавление внутренних теней или даже штрихов в 1 пиксель, примененных только к нижней части текста, добавило бы огромную разницу в общий вид не только страницы продукта, но и всего приложения, создав значительно увеличенный вид глубины, как правило, делая приложение намного более визуально привлекательным.
выше: страница с изображением продукта Amazon UK — действительно ли это нужно? нет …
Небо — это предел для приложений для iPhone, и эта страница просто не достигает этого предела. Посмотрите на некоторые другие приложения и обратите внимание на некоторые эффекты, которые они используют, позволяя своим пользователям прокручивать изображения. Действительно ли необходим отдельный экран, чтобы можно было просматривать больше изображений?
Опять же, другого нет. Посмотрите на два примера того, как другие приложения для покупок отображают свои изображения ниже, оба из которых используют простую технику щелчков, чтобы пользователь мог перемещать изображения слева направо (или справа налево!), Очень похоже на контент / изображение слайдер, который вы видите в сети.
выше: приложение Topshop для iphone — прокрутка изображений
выше: следующее приложение для iPhone — прокрутка изображения
Вывод
Как вы, наверное, поняли, стоит обратить внимание на мелкие детали и сделать все возможное, чтобы сделать приложение для iPhone простым в использовании. Amazon является одним из крупнейших онлайн-брендов в мире, и со всеми его разработчиками и деньгами, которые они имеют для аутсорсинга проектов, приложение далеко от совершенства — оно прекрасно работает, но имеет много возможностей для улучшения с точки зрения пользовательского интерфейса.
Мы надеемся, что вы взяли несколько полезных советов из этой статьи, и они напомнят вам о том, что вы должны тратить как можно больше времени на разработку своего приложения, обращая внимание на то, что понравится вашим пользователям. Просто спросите себя: «Если бы я использовал это приложение (а оно было не мое), что бы я хотел, чтобы оно могло делать?» Мозговой штурм ваши идеи, а затем применять их на практике. Удачи!
Следите за будущим руководством о том, как создать собственное приложение для покупок на iPhone в сети Tuts +!