Оффтоп Philipp Kontsarenko
7 719

Концепт: Редизайн приложения Instagram для iPhone

Дизайнер из США Ким Туи Ту опубликовала в блоге FreeCodeCamp концепт редизайна приложения Instagram для iPhone. Она рассказал о том, какие проблемы обнаружила в интерфейсе сервиса и как предлагает их решить.

В закладки

Туи Ту поставила перед собой задачу: взять приложение, которое она использует каждый день, и попробовать переосмыслить его интерфейс. Её выбор остановился на Instagram — дизайнер является постоянным пользователем сервиса с 2011 года.

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

Частота использования Instagram
Частота использования различных функций Instagram

Туи Ту также составила портрет типичного пользователя сервиса. За его основу она взяла данные нескольких исследований аудитории Instagram.

Согласно исследованиям, взятым Туи Ту за основу, 90% пользователей сервиса младше 35 лет, 55% — пользователи от 18 до 29 лет

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

Увеличить

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

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

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

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

Дизайнер проверила, как много пользователей знают о возможностях навигации по приложению при помощи свайпов. В результате проведенного опроса 40 пользователей сервиса она выяснила, что только 20% опрошенных знают, как использовать свайп для навигации в приложении. Более 70% респондентов отметили, что нажимают на пункты меню в шапке для того, чтобы переключиться на тот или иной раздел Instagram.

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

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

Discovery

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

Личные сообщения

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

Уведомления

Профиль пользователя

#Интерфейсы

{ "author_name": "Philipp Kontsarenko", "author_type": "editor", "tags": ["\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 21, "likes": 17, "favorites": 1, "is_advertisement": false, "subsite_label": "flood", "id": 22412, "is_wide": false }
00
дни
00
часы
00
мин
00
сек
(function(){ var banner = document.querySelector('.teaserSberbank'); var isAdsDisabled = document.querySelector('noad'); if (!isAdsDisabled){ var countdownTimer = null; var timerItem = document.querySelectorAll('[data-sber-timer]'); var seconds = parseInt('15388' + '59599') - now(); function now(){ return Math.round(new Date().getTime()/1000.0); } function timer() { var days = Math.floor(seconds / 24 / 60 / 60); var hoursLeft = Math.floor((seconds) - (days * 86400)); var hours = Math.floor(hoursLeft / 3600); var minutesLeft = Math.floor((hoursLeft) - (hours * 3600)); var minutes = Math.floor(minutesLeft / 60); var remainingSeconds = seconds % 60; if (days < 10) days = '0' + days; if (hours < 10) hours = '0' + hours; if (minutes < 10) minutes = '0' + minutes; if (remainingSeconds < 10) remainingSeconds = '0' + remainingSeconds; if (seconds <= 0) { clearInterval(countdownTimer); } else { timerItem[0].textContent = days; timerItem[1].textContent = hours; timerItem[2].textContent = minutes; timerItem[3].textContent = remainingSeconds; seconds -= 1; } } timer(); countdownTimer = setInterval(timer, 1000); } else { banner.style.display = 'none'; } })();
{ "id": 22412, "author_id": 4, "diff_limit": 1000, "urls": {"diff":"\/comments\/22412\/get","add":"\/comments\/22412\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/22412"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199791 }

21 комментарий 21 комм.

Популярные

По порядку

Написать комментарий...
19

Я, можeт, нeдостаточно квалифицирован для трeзвой оцeнки, но как чeловeк с опытом в дизайнe скажу - этот концeпт-интeрфeйс eщe болee загружeнный, чeм тeкущий. Много мeлких дeталeй, чисто с точки зрeния эргономичности это для дeсктопа подойдeт лучшe.

Да, анализ нeплохой, но рeшeниe - никакоe. Eй стоит пойти в аналитику, там она лучшe сeбя проявит

Ответить
7

Основная беда в Instagram, что когда мы открываем какую-нибудь фотографию (особенно это чувствуется на странице профиля), то чтобы посмотреть следующую — нужно нажать стрелку "назад" чтобы вернуться к списку и выбрать следующее фото... почему нельзя листать влево/вправо?

Ответить
4

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

Ответить
0

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

Ответить
4

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

Ответить
6

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

Ответить
3

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

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

Ответить
7

Увы, но это единственное норм-решение, которое и так обсуждалось и не раз.

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

Ответить
4

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

Проблема 21 века. Что листать в первую очередь. ппц...

Ответить
4

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

Ответить
0

Да кто пользуется этим инстраграмом ?

Ответить

Комментарий удален

2

(

Ответить

Комментарий удален

1

Туи Ту также составила портрет типичного пользователя сервиса. За его основу она взяла данные нескольких исследований аудитории Instagram.

Чивоблять?

Хуйня, а не портрет.

Зачем вообще их до сих пор делают?

Ответить
0

Крупные заказчики (зачем то) требуют представить им роли потенциальных пользователей ИС. зачем? потому что так у всех и так принято. Это в россии. Зачем их делаю там? не наверное по тому же, так принято, это стандарты отрасли.

Ответить
0

Так удобнее составлять пользовательские сценарии. Делаешь классовые выборки по своей ЦА, а потом под каждого персонажа/пользователя прорабатываешь взаимодействие с учетом его особенностей.

Ответить
0

Это же классический способ при проектировании UI. Почитайте Алана Купера "Психбольница в руках пациентов", там подробно написано зачем это нужно. Если в двух словах, то при таком подходе сложнее притянуть за уши ненужные фичи и повышается вовлеченность проектировщика.

Ответить
–1

Но это же все бред.

Инстаграмом пользуются абсолютно разные люди.

Фотографы, студенты, модели, тпшки, обрыганы, сми, технари, гуманитарии, педоры, лесбиянки, люди с одной рукой, люди без ног, итд.

Не делать же тут на каждого выдуманное описание.

Ответить
0

Портрет делается на основе среднестатистического сегмента из ЦА.

Ответить

Комментарий удален

Комментарий удален

0

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

Ответить
0

По-моему тут фейл со всех сторон.

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

Кнопки Story - Feed мелкие капец, а еще до каждого из пунктов стало добираться на один тап больше.

Зачем истории группировать с сообщениями, если они с ними никак не связаны? Много вопросов, в общем.

Ответить
0

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

Ответить
0

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Компания отказалась от email
в пользу общения при помощи мемов
Подписаться на push-уведомления