Многие корпорации уделяют особое внимание мобильным пользователям – действительно, доля тех, кто практически не выпускает смартфоны из рук, непрерывно растёт. У обладателей умных мобильных устройств за время использования девайсов формируются определённые привычки, связанные с особенностями организации новостных лент в социальных сетях. Свои ожидания они переносят и на другие информационные приложения, в частности, новостные ленты: пользователям нужен актуальный контент, релевантный их интересам, комфортный режим просмотра и минимальное время ознакомления с новостями.
Команда Top Story выпустила мобильное приложение для чтения новостей и создания подписок, которое учитывает интересы хозяина смартфона. Top Story знает, насколько важно, чтобы приложение было удобным, приятным и отзывчивым, поэтому в еженедельных релизах обязательно присутствуют доработки интерфейса. Мы уделяем значительное внимание каждому элементу и их работе в совокупности. Команда TopStory готова вам рассказать, как шаг за шагом мы проходили путь к удобному и интуитивно понятному интерфейсу.
Top Story непрерывно работает над интерфейсом приложения, занимается этим постоянная группа, состоящая из трёх дизайнеров. В основе большинства изменений лежат отзывы, предложения и идеи пользователей, которые они высказывают в комментариях в социальных сетях, в Google Play и в App Store, а также сообщают нам по электронной почте. Изменения бывают глобальные, например, изменение стиля ленты, а бывают и не очень большие, например, изменение цвета интерфейса, стиля и размера шрифта и проч… На серии скриншотов можно увидеть, как эволюционировал кнопка шеринга и верхнее правое меню: кнопка постепенно стала плавающей внизу экрана – так пользователь может поделиться понравившимся контентом сразу после прочтения. А в правое верхнее меню были вынесены две функции, которые важны именно во время чтения: возможность менять размер шрифта на экране и «звёздочка» для того, чтобы отправить понравившийся материал в закладки (раздел «Моя коллекция»). Расположение этой кнопки привычно пользователям – именно так она выглядит в большинстве браузеров.
В качестве эксперимента мы внедрили нижнюю панель навигации – пока результаты радуют и пользователей Top Story, и нас – всегда удобно переключиться на нужную вкладку и получить быстрый доступ к новостям или любимым подпискам. К такой панели навигации разработчики пришли не сразу – изначально использовался стандартный для приложений тип навигации, рекомендуемой Google для мобильных разработчиков. Это было боковое меню, к которому все привыкли, пользуясь социальными сетями или, например, приложением Google Play. Нижнее меню оказалось функциональнее и лучше с точки зрения доступности контента. Нельзя утверждать, что боковое меню – это плохое интерфейсное решение, оно прекрасно смотрится для приложений с жёсткой структурой (вспомните Facebook, Вконтакте), однако специфика новостной ленты делает нижнее меню более привлекательным вариантом.
Буквально несколько дней назад мы изменили название «Дайджест» на «Рекомендуемое», это произошло как раз в день выхода нашего первого обзора. На эти изменения нас натолкнула логика формирования самого раздела: Top Story – машина обучаемая и рекомендует пользователю новости, исходя из его интересов. Раздел «Популярное» поменяли на название «Из соцсетей», так как именно в социальных сетях сосредоточен популярный среди читателей контент.
То, что приложение работает на смартфонах, вносит ещё один важный штрих в разработку – приходится работать с сенсорным интерфейсом на различных размерах экранов. Кстати, во многом именно из-за более комфортной работы с различными размерами экранов была выбрана нижняя панель навигации – нет необходимости тянуться вверх за боковым меню – достаточно переключить разделы одним пальцем. Также мы стараемся использовать сенсорную навигацию для управления приложением жестами рук. Например, для возврата в раздел из читаемой статьи достаточно потянуть экран вправо. Это, кстати, не очень стандартное решение – обычно, чтобы вернуться назад, делают слайд влево. Но по логике приложения и интерфейса мы решили проэксперементировать со слайдом вправо и анимацией. Пользователю это решение понравилось
Не последнюю роль в дизайне играет цвет – и с ним мы тоже успели поэкспериментировать. Как вы можете видеть на скриншотах, раньше приложение было оформлено в синих цветах – отсылка к деловому стилю. Однако текущая версия имеет красный скин – нам кажется, что это больше отражает сущность Top Story, ассоциируется со скоростью (раздел «Главное» получает новости в течение 2-3 минут после того, как они вышли на основных новостных лентах), с горячими известиями и более неформально.
Для того, чтобы лучше узнать пользователя и предлагать только те новости, которые ему хочется видеть, в Top Story актуальной версии предусмотрели своеобразное голосование за новость – владелец смартфона может нажать кнопку с крестиком в правом нижнем углу любой новости в ленте и в открывшемся диалоговом окне отметить причину, по которой ему не нравится контент. Система учтёт его пожелания при формировании ленты в дальнейшем.
Пользователи могут не только получать новости, которые их интересуют, но и редактировать разделы, доступные в верхнем меню. Для удобства мы сделали список, в котором достаточно выставить или убрать хинты на соответствующих разделах. По желанию владельца смартфона могут приходить уведомления об интересных и последних новостях – они отображаются значком в верхнем тулбаре экрана.
Поскольку новостная лента – это на 100% приложение для пользователя, к которому он часто обращается, мы постарались обратить внимание на возможные потребности. Например, известно, что нередко новостями интересуются пожилые люди, у которых стало всё больше модных смартфонов. Для них и для слабовидящих мы предусмотрели переключение шрифта. Причём изменить размер букв можно как в настройках аккаунта, так и в верхнем правом углу во время непосредственного чтения страницы. С целью заботы о читающих в темноте и людях, которые находятся рядом с ними, в Top Story предусмотрен ночной режим (белые буквы на чёрном фоне), который пользователь может включать в настройках аккаунта самостоятельно.
Ещё один блок интерфейса, над которым мы тщательно работали – шеринг, включая социальные сети. С помощью кнопки шеринга можно поделиться понравившейся статьёй через почту, WhatsApp, социальные сети.
Кроме этого, под прочитанной статьёй есть возможность поставить лайк или дизлайк и сразу поделиться в социально сети, нажав на её пиктограмму. Если предусмотрена подписка на источник, то прямо под прочитанной статьёй пользователь может подписаться на понравившийся ресурс, нажав плюс.
Раздел, который интересует вас больше всего, можно вынести на рабочий стол смартфона и создать целое новостное пространство на базе Top Story. В новейшем релизе добавилась ещё одна фишка: при создании подписки на некоторые источники (Life News, Big Picture, Hi-Tech, Nacked Science и др.) и вынесении источника на рабочий стол смартфона появляется привычный логотип источника, а не цветной ярлык, как было до этого и как пока сохраняется для выбранных пользователем ключевых слов.
Иногда пользователи отмечают, что интерфейсы Top Story на смартфонах под управлением Android и на iPhone несколько отличаются. Действительно, иногда можно видеть различия – это обусловлено длительным циклом рассмотрения нового релиза приложения в App Store (7-10 рабочих дней, что в итоге сводится к двум неделям). Однако в целом приложения имеют практически одинаковый интерфейс.
Интерфейс Top Story меняется еженедельно, заметно и незаметно. На сегодняшний день приложение выглядит и управляется сбалансированно, поток пожеланий пользователей по внешним доработкам уменьшился. Непрерывная работа ведётся не только над программированием бэкенда системы, который отвечает за релевантность новостей интересам пользователей, но и над интерфейсом, который должен отвечать меняющимся с фантастической скоростью требованиям юзабилити. В начале поста мы сказали, что у нас три дизайнера – на самом деле, у них их десятки тысяч – все те пользователи, которые ежедневно (а некоторые и ежечасно) пользуются нашим приложением и дают обратную связь.
Приглашаем и вас присоединиться к нашим пользователям на смартфонах Android и iPhone!
Команда Top Story выпустила мобильное приложение для чтения новостей и создания подписок, которое учитывает интересы хозяина смартфона. Top Story знает, насколько важно, чтобы приложение было удобным, приятным и отзывчивым, поэтому в еженедельных релизах обязательно присутствуют доработки интерфейса. Мы уделяем значительное внимание каждому элементу и их работе в совокупности. Команда TopStory готова вам рассказать, как шаг за шагом мы проходили путь к удобному и интуитивно понятному интерфейсу.
Top Story непрерывно работает над интерфейсом приложения, занимается этим постоянная группа, состоящая из трёх дизайнеров. В основе большинства изменений лежат отзывы, предложения и идеи пользователей, которые они высказывают в комментариях в социальных сетях, в Google Play и в App Store, а также сообщают нам по электронной почте. Изменения бывают глобальные, например, изменение стиля ленты, а бывают и не очень большие, например, изменение цвета интерфейса, стиля и размера шрифта и проч… На серии скриншотов можно увидеть, как эволюционировал кнопка шеринга и верхнее правое меню: кнопка постепенно стала плавающей внизу экрана – так пользователь может поделиться понравившимся контентом сразу после прочтения. А в правое верхнее меню были вынесены две функции, которые важны именно во время чтения: возможность менять размер шрифта на экране и «звёздочка» для того, чтобы отправить понравившийся материал в закладки (раздел «Моя коллекция»). Расположение этой кнопки привычно пользователям – именно так она выглядит в большинстве браузеров.
В качестве эксперимента мы внедрили нижнюю панель навигации – пока результаты радуют и пользователей Top Story, и нас – всегда удобно переключиться на нужную вкладку и получить быстрый доступ к новостям или любимым подпискам. К такой панели навигации разработчики пришли не сразу – изначально использовался стандартный для приложений тип навигации, рекомендуемой Google для мобильных разработчиков. Это было боковое меню, к которому все привыкли, пользуясь социальными сетями или, например, приложением Google Play. Нижнее меню оказалось функциональнее и лучше с точки зрения доступности контента. Нельзя утверждать, что боковое меню – это плохое интерфейсное решение, оно прекрасно смотрится для приложений с жёсткой структурой (вспомните Facebook, Вконтакте), однако специфика новостной ленты делает нижнее меню более привлекательным вариантом.
Буквально несколько дней назад мы изменили название «Дайджест» на «Рекомендуемое», это произошло как раз в день выхода нашего первого обзора. На эти изменения нас натолкнула логика формирования самого раздела: Top Story – машина обучаемая и рекомендует пользователю новости, исходя из его интересов. Раздел «Популярное» поменяли на название «Из соцсетей», так как именно в социальных сетях сосредоточен популярный среди читателей контент.
То, что приложение работает на смартфонах, вносит ещё один важный штрих в разработку – приходится работать с сенсорным интерфейсом на различных размерах экранов. Кстати, во многом именно из-за более комфортной работы с различными размерами экранов была выбрана нижняя панель навигации – нет необходимости тянуться вверх за боковым меню – достаточно переключить разделы одним пальцем. Также мы стараемся использовать сенсорную навигацию для управления приложением жестами рук. Например, для возврата в раздел из читаемой статьи достаточно потянуть экран вправо. Это, кстати, не очень стандартное решение – обычно, чтобы вернуться назад, делают слайд влево. Но по логике приложения и интерфейса мы решили проэксперементировать со слайдом вправо и анимацией. Пользователю это решение понравилось
Не последнюю роль в дизайне играет цвет – и с ним мы тоже успели поэкспериментировать. Как вы можете видеть на скриншотах, раньше приложение было оформлено в синих цветах – отсылка к деловому стилю. Однако текущая версия имеет красный скин – нам кажется, что это больше отражает сущность Top Story, ассоциируется со скоростью (раздел «Главное» получает новости в течение 2-3 минут после того, как они вышли на основных новостных лентах), с горячими известиями и более неформально.
Для того, чтобы лучше узнать пользователя и предлагать только те новости, которые ему хочется видеть, в Top Story актуальной версии предусмотрели своеобразное голосование за новость – владелец смартфона может нажать кнопку с крестиком в правом нижнем углу любой новости в ленте и в открывшемся диалоговом окне отметить причину, по которой ему не нравится контент. Система учтёт его пожелания при формировании ленты в дальнейшем.
Пользователи могут не только получать новости, которые их интересуют, но и редактировать разделы, доступные в верхнем меню. Для удобства мы сделали список, в котором достаточно выставить или убрать хинты на соответствующих разделах. По желанию владельца смартфона могут приходить уведомления об интересных и последних новостях – они отображаются значком в верхнем тулбаре экрана.
Поскольку новостная лента – это на 100% приложение для пользователя, к которому он часто обращается, мы постарались обратить внимание на возможные потребности. Например, известно, что нередко новостями интересуются пожилые люди, у которых стало всё больше модных смартфонов. Для них и для слабовидящих мы предусмотрели переключение шрифта. Причём изменить размер букв можно как в настройках аккаунта, так и в верхнем правом углу во время непосредственного чтения страницы. С целью заботы о читающих в темноте и людях, которые находятся рядом с ними, в Top Story предусмотрен ночной режим (белые буквы на чёрном фоне), который пользователь может включать в настройках аккаунта самостоятельно.
Ещё один блок интерфейса, над которым мы тщательно работали – шеринг, включая социальные сети. С помощью кнопки шеринга можно поделиться понравившейся статьёй через почту, WhatsApp, социальные сети.
Кроме этого, под прочитанной статьёй есть возможность поставить лайк или дизлайк и сразу поделиться в социально сети, нажав на её пиктограмму. Если предусмотрена подписка на источник, то прямо под прочитанной статьёй пользователь может подписаться на понравившийся ресурс, нажав плюс.
Раздел, который интересует вас больше всего, можно вынести на рабочий стол смартфона и создать целое новостное пространство на базе Top Story. В новейшем релизе добавилась ещё одна фишка: при создании подписки на некоторые источники (Life News, Big Picture, Hi-Tech, Nacked Science и др.) и вынесении источника на рабочий стол смартфона появляется привычный логотип источника, а не цветной ярлык, как было до этого и как пока сохраняется для выбранных пользователем ключевых слов.
Иногда пользователи отмечают, что интерфейсы Top Story на смартфонах под управлением Android и на iPhone несколько отличаются. Действительно, иногда можно видеть различия – это обусловлено длительным циклом рассмотрения нового релиза приложения в App Store (7-10 рабочих дней, что в итоге сводится к двум неделям). Однако в целом приложения имеют практически одинаковый интерфейс.
Интерфейс Top Story меняется еженедельно, заметно и незаметно. На сегодняшний день приложение выглядит и управляется сбалансированно, поток пожеланий пользователей по внешним доработкам уменьшился. Непрерывная работа ведётся не только над программированием бэкенда системы, который отвечает за релевантность новостей интересам пользователей, но и над интерфейсом, который должен отвечать меняющимся с фантастической скоростью требованиям юзабилити. В начале поста мы сказали, что у нас три дизайнера – на самом деле, у них их десятки тысяч – все те пользователи, которые ежедневно (а некоторые и ежечасно) пользуются нашим приложением и дают обратную связь.
Приглашаем и вас присоединиться к нашим пользователям на смартфонах Android и iPhone!
