Тостер: новый отзывчивый дизайн и планы на будущее
- четверг, 23 октября 2014 г. в 03:11:08
http://habrahabr.ru/company/tm/blog/241191/
Мы рады представить новый отзывчивый (responsive) дизайн «Тостера»! Теперь задать вопрос или дать ответ можно с одинаковой лёгкостью с любого устройства, оказавшегося у вас в данный момент под рукой.
Затевая глобальный редизайн «Тостера», мы ставили перед собой три цели:
Заниматься саморазвитием и помогать в этом другим нужно не только в учебное или рабочее время, но и при любой открывающейся возможности. А это в наше время напрямую связано с возможностями тех устройств, которые у нас оказываются под рукой. Что хорошо работает на мобильном телефоне, пока мы едем на электричке, тем мы и пользуемся, то и развиваем. Это было основной установкой, когда мы решили приспособить «Тостер» подо все устройства.
Перед нами стоял выбор: сделать несколько независимых версий сервиса — под телефон, планшет и компьютер — или же создать одну универсальную версию, которая будет подстраиваться сама. Мы выбрали второе, это потребовало от нас гораздо больших усилий на первом этапе, но мы верим, что в будущем это окупится с лихвой. Делая ставку на отзывчивый дизайн, мы рассчитываем очень быстро внедрять новые функции и поддерживать их в полном объеме на всех основных устройствах.
Рассказывать обо всём, что было сделано для отзывчивости интерфейса, не имеет смысла — лучше самим заглянуть на новый «Тостер» и пощупать вживую. Заметим только, что самая большая сложность в отзывчивом дизайне — заранее продумать, как будет выглядеть каждый из элементов на разных экранах, и постараться спроектировать наиболее универсальную форму, мало меняющуюся в зависимости от доступной ширины. Так, для списков пользователей и тегов мы неслучайно пришли к форме карточки.
Многого мы еще не сделали, не оптимизировали, кое-что может давать сбои, но главное, что основной функционал работает! Будем признательны за помощь в доработке всех нюансов.
На паре примеров покажем, каким образом мы постарались сделать интерфейс более интуитивным и «говорящим». Кому интересно, можете посмотреть краткую презентацию сервиса о том, что и как работает, её мы будем показываем нашим гостям, впервые попавшим на сервис.
Список вопросов — это интерфейс, с которого для большинства зарегистрированных пользователей регулярно начинается взаимодействие с «Тостером». Задача такого списка — сподвгнуть человека либо написать ответ, либо зайти и почитать чужие ответы.
Как было. Было непонятно, что обозначают цифры, занимающие самое видное место в каждом блоке, почему они оказываются важнее самого вопроса. Информация о том, есть ли у вопросов полученные ответы, теряется в прочей второстепенной и информации.
Как стало. Мы убрали всё лишнее, чётко выделили главные элементы, выстроили их визуально в иерерхию, ведя взгляд пользователя от главного к второстепенному: тематика вопроса, сам вопрос, наличие ответов и решений, число людей, которые ждут ответов.
Страница вопроса — самая важная часть сервиса. На этой странице происходит основное взаимодействие пользователей друг с другом. Порядка 80% всех посещений приходится именно на эту страницу. Большая часть гостей впервые оказывается на «Тостере», перейдя из поиска сюда. Нам очень важно, чтобы эта страница была не только удобна для зарегистрированных пользователей, но еще и раскрывала бы смысл сервса для гостей.
Вот как эта страница выглядела в старом дизайне. Самым заметным и ярким элементом почему-то был сортировщик ответов (от которого мы, кстати, вообще отказались в новом дизайне). Неправомерно важное место занимают табы: вопрос — подписчики — история изменений. При этом совершенно непонятно, как стать таким же подписчиком. А история изменений должна вызывать у новичка благоговейный ужас (=
И вот как стало. Мы постарались сфокусировать внимание пользователя на двух самых важных действиях, которые мы ожидаем от него на странице вопроса, отодвинув на задний план все прочие. Эти действия даны через хорошо заметные кнопки: «Подписаться на вопрос» и «Нравится ответ». Комментирование, расшаривание, редактирование и жалобы уведены на задний план.
На сервисе «вопросов и ответов для IT-специалистов» важно понимать, что вопросы задают живые люди, а не виртуальные персонажи, что отвечают на вопросы специалисты в данной области, занимающие конкретные позиции в самых разных компаниях, а не случайные люди без рода и племени.
И мы постарались наглядно показать, что ответа на вопрос ожидают конкретные люди, и их может быть много. Согласитесь, чем больше людей хотят узнать ответ, тем важнее такой ответ дать, тем с большим энтузиазмом будут отвечать. Также в новом «Тостере» мы начали выводить настоящие имена вместо никнеймов и добавили возможность выводить рядом со своим именем краткую подпись «О себе». Посмотрите, как меняется впечатление от вопроса и ответа на него, как только вместо аватарок и никнеймов участники сообщества показывают свои настоящие фотографии и имена, а также пишут краткую характеристику «О себе». (Совпадение имен и фотографий с реальными участниками — случайно).
Стратегически мы движемся к тому, чтобы как только у тебя возникает неразрешимый вопрос из области IT, ответ на который ты не можешь быстро найти поиском, ты тут же вспоминал бы про «Тостер», что здесь всегда найдутся люди, которые знают ответ.
Поэтому наша основная задача — привлечь на «Тостер» критическую массу квалифицированных специалистов из самых разных областей IT: программистов, верстальщиков, дизайнеров, маркетологов, аналитиков, управленцев и т.д. Чтобы в любой IT-сфере, представленной на сервисе, у нас было бы своё активное тематическое сообщество.
С другой стороны, мы стремимся к тому, чтобы на любой вопрос отвечали бы как можно скорее и добросовестнее. А это уже вопрос внутренней организации сообщества, которое мы выстраиваем: нам надо уметь быстро и точно доставлять вопросы до нужных специалистов, а также мотивировать их на ответ.
Какие конкретные шаги мы планируем предпринять в ближайшей перспективе для для достижения нашей стратегической цели.
Уникальность и сила «Тостера» в том, что вся информация распределяется по тематическим тегам. Достаточно подписываться на те темы, которыми ты интересуешься, чтобы получать только ту информацию, которая имеет отношение непосредственно к тебе, не получая при этом ничего лишнего.
С подпиской на нужные теги сложнее всего в самом начале, сразу после регистрации. По нашей статистике хотя бы на один тег подписывается сейчас только каждый пятый. Это значит, что подавляющее большинство пользователей никак не настроили «Тостер» под свои интересы и не получают никакой информации о новых вопросах по своей специализации, а потому не могут дать оперативного ответа.
Поэтому первое, что мы сделаем — постараемся убедить нового пользователя сразу после регистрации подписаться минимум на 10 тегов по своей области знаний. Далее, мы введём ненавязчивые фоновые рекомендации тегов, близких тем, на которые ты уже подписан, чтобы можно было регулярно и по чуть-чуть улучшать настройку «Тостера» под себя.
Если пользователь тщательно описал свою область знаний, подписавшись на множество тегов, это еще не гарантирует, что он будет регулярно заходить на сервис в поисках новых неотвеченных вопросов по этим темам. Нужно сделать так, чтобы новые вопросы сами находили бы нужных специалистов. В этом направлении у нас есть две идеи.
Мы планируем ввести «усиленную» подписку на теги. Если ты усиляешь подписку на тег, то все новые вопросы по этому тегу будут высылаться напрямую тебе на почту. Особенно эта функция важна для тех тегов, вокруг которых пока не сформировалось регулярное сообщество специалистов.
Второе, что мы хотим — дать возможность звать в вопрос нужных специалистов, высылая им личное уведомление с просьбой ответить на вопрос. Для этого в каждом вопросе мы будем рекомендовать тех пользователей, которые до этого наилучшим образом проявили себя в тегах вопроса.
Отвечать хочется на «умные» вопросы. Но практика показывает, что зачастую вопрос кажется глупым только потому, что его автор плохо или безграмотно сформулировал свою мысль. Среди нас не так много людей, которые умеют гладко и убедительно высказываться. Почему бы не просить таких людей помогать нам?
Мы планируем ввести коллективное редактирование вопросов. По примеру того, как у нас уже работает коллективное редактирование тегов. Вместо того, чтобы жаловаться на смысл вопроса или его грамматику, приговаривая таким образом вопрос к удалению, у каждого будет возможность попытатся этот вопрос исправить.
Редактировать можно будет не только суть и детали вопроса, но также и теги. А это позволит нам опять же ускорять доставку вопросов до нужных специалистов. Ведь задающий вопрос часто не знает даже, к какой области знаний его правильнее отнести, чтобы получить наибольшее внимание.
Каждый участник сообщества «Тостера» должен получать достойное призание за свои усилия. У нас уже есть такое понятие как «вклад в тег», по которому неплохо видно, в каких областях знаний силён каждый пользователь, за что больше всего его ценит сообщество. Однако, это довольно абстрактное понятие, не раскрывающее всех деталей вклада, а также не учитывающее многих деталей, напрямую не связанных с ответами на вопрос, но помогающих, тем не менее, этим ответам рождаться.
Поэтому нам нужны бэйджики, которые мы сможем выдавать в качестве наград за те достижения, которые ценим. Например, за то, что первым даёшь ответы, что откликаешься на просьбы помочь, что помогаешь правильно формулировать вопросы, что даешь качественные и полезные ответы и т. д.
Чтобы первым узнавать о нововведениях на «Тостере», подписывайтесь на наши новости в хабе «Хабрахабр — анонсы», а также на наши социальных каналы: ВКонтакте, Facebook или Twitter.
Мы рады представить новый отзывчивый (responsive) дизайн «Тостера»! Теперь задать вопрос или дать ответ можно с одинаковой лёгкостью с любого устройства, оказавшегося у вас в данный момент под рукой.
Затевая глобальный редизайн «Тостера», мы ставили перед собой три цели:
- Доступность. Чтобы можно было задавать вопросы и давать ответы в любое время дня и ночи, где бы вы ни находились.
- Понятность. Язык интерфейса без дополнительных инструкций должен очень быстро доносить смысл сервиса и то, как им правильно пользоваться.
- Гибкость. При добавлении новых функций не должно возникать препятствий в интерфейсе для их быстрого и качественного внедрения.
1. Отзывчивый дизайн
Заниматься саморазвитием и помогать в этом другим нужно не только в учебное или рабочее время, но и при любой открывающейся возможности. А это в наше время напрямую связано с возможностями тех устройств, которые у нас оказываются под рукой. Что хорошо работает на мобильном телефоне, пока мы едем на электричке, тем мы и пользуемся, то и развиваем. Это было основной установкой, когда мы решили приспособить «Тостер» подо все устройства.
Перед нами стоял выбор: сделать несколько независимых версий сервиса — под телефон, планшет и компьютер — или же создать одну универсальную версию, которая будет подстраиваться сама. Мы выбрали второе, это потребовало от нас гораздо больших усилий на первом этапе, но мы верим, что в будущем это окупится с лихвой. Делая ставку на отзывчивый дизайн, мы рассчитываем очень быстро внедрять новые функции и поддерживать их в полном объеме на всех основных устройствах.
Рассказывать обо всём, что было сделано для отзывчивости интерфейса, не имеет смысла — лучше самим заглянуть на новый «Тостер» и пощупать вживую. Заметим только, что самая большая сложность в отзывчивом дизайне — заранее продумать, как будет выглядеть каждый из элементов на разных экранах, и постараться спроектировать наиболее универсальную форму, мало меняющуюся в зависимости от доступной ширины. Так, для списков пользователей и тегов мы неслучайно пришли к форме карточки.
Многого мы еще не сделали, не оптимизировали, кое-что может давать сбои, но главное, что основной функционал работает! Будем признательны за помощь в доработке всех нюансов.
2. Ясность интерфейса
На паре примеров покажем, каким образом мы постарались сделать интерфейс более интуитивным и «говорящим». Кому интересно, можете посмотреть краткую презентацию сервиса о том, что и как работает, её мы будем показываем нашим гостям, впервые попавшим на сервис.
Список вопросов
Список вопросов — это интерфейс, с которого для большинства зарегистрированных пользователей регулярно начинается взаимодействие с «Тостером». Задача такого списка — сподвгнуть человека либо написать ответ, либо зайти и почитать чужие ответы.
Как было. Было непонятно, что обозначают цифры, занимающие самое видное место в каждом блоке, почему они оказываются важнее самого вопроса. Информация о том, есть ли у вопросов полученные ответы, теряется в прочей второстепенной и информации.
Как стало. Мы убрали всё лишнее, чётко выделили главные элементы, выстроили их визуально в иерерхию, ведя взгляд пользователя от главного к второстепенному: тематика вопроса, сам вопрос, наличие ответов и решений, число людей, которые ждут ответов.
Страница отдельного вопроса
Страница вопроса — самая важная часть сервиса. На этой странице происходит основное взаимодействие пользователей друг с другом. Порядка 80% всех посещений приходится именно на эту страницу. Большая часть гостей впервые оказывается на «Тостере», перейдя из поиска сюда. Нам очень важно, чтобы эта страница была не только удобна для зарегистрированных пользователей, но еще и раскрывала бы смысл сервса для гостей.
Вот как эта страница выглядела в старом дизайне. Самым заметным и ярким элементом почему-то был сортировщик ответов (от которого мы, кстати, вообще отказались в новом дизайне). Неправомерно важное место занимают табы: вопрос — подписчики — история изменений. При этом совершенно непонятно, как стать таким же подписчиком. А история изменений должна вызывать у новичка благоговейный ужас (=
И вот как стало. Мы постарались сфокусировать внимание пользователя на двух самых важных действиях, которые мы ожидаем от него на странице вопроса, отодвинув на задний план все прочие. Эти действия даны через хорошо заметные кнопки: «Подписаться на вопрос» и «Нравится ответ». Комментирование, расшаривание, редактирование и жалобы уведены на задний план.
Социальный профиль
На сервисе «вопросов и ответов для IT-специалистов» важно понимать, что вопросы задают живые люди, а не виртуальные персонажи, что отвечают на вопросы специалисты в данной области, занимающие конкретные позиции в самых разных компаниях, а не случайные люди без рода и племени.
И мы постарались наглядно показать, что ответа на вопрос ожидают конкретные люди, и их может быть много. Согласитесь, чем больше людей хотят узнать ответ, тем важнее такой ответ дать, тем с большим энтузиазмом будут отвечать. Также в новом «Тостере» мы начали выводить настоящие имена вместо никнеймов и добавили возможность выводить рядом со своим именем краткую подпись «О себе». Посмотрите, как меняется впечатление от вопроса и ответа на него, как только вместо аватарок и никнеймов участники сообщества показывают свои настоящие фотографии и имена, а также пишут краткую характеристику «О себе». (Совпадение имен и фотографий с реальными участниками — случайно).
3. Планы на будущее
Стратегически мы движемся к тому, чтобы как только у тебя возникает неразрешимый вопрос из области IT, ответ на который ты не можешь быстро найти поиском, ты тут же вспоминал бы про «Тостер», что здесь всегда найдутся люди, которые знают ответ.
Поэтому наша основная задача — привлечь на «Тостер» критическую массу квалифицированных специалистов из самых разных областей IT: программистов, верстальщиков, дизайнеров, маркетологов, аналитиков, управленцев и т.д. Чтобы в любой IT-сфере, представленной на сервисе, у нас было бы своё активное тематическое сообщество.
С другой стороны, мы стремимся к тому, чтобы на любой вопрос отвечали бы как можно скорее и добросовестнее. А это уже вопрос внутренней организации сообщества, которое мы выстраиваем: нам надо уметь быстро и точно доставлять вопросы до нужных специалистов, а также мотивировать их на ответ.
Какие конкретные шаги мы планируем предпринять в ближайшей перспективе для для достижения нашей стратегической цели.
1. Улучшить подстройку сервиса под интересы каждого участника
Уникальность и сила «Тостера» в том, что вся информация распределяется по тематическим тегам. Достаточно подписываться на те темы, которыми ты интересуешься, чтобы получать только ту информацию, которая имеет отношение непосредственно к тебе, не получая при этом ничего лишнего.
С подпиской на нужные теги сложнее всего в самом начале, сразу после регистрации. По нашей статистике хотя бы на один тег подписывается сейчас только каждый пятый. Это значит, что подавляющее большинство пользователей никак не настроили «Тостер» под свои интересы и не получают никакой информации о новых вопросах по своей специализации, а потому не могут дать оперативного ответа.
Поэтому первое, что мы сделаем — постараемся убедить нового пользователя сразу после регистрации подписаться минимум на 10 тегов по своей области знаний. Далее, мы введём ненавязчивые фоновые рекомендации тегов, близких тем, на которые ты уже подписан, чтобы можно было регулярно и по чуть-чуть улучшать настройку «Тостера» под себя.
2. Ускорить доставку вопросов до нужных специалистов
Если пользователь тщательно описал свою область знаний, подписавшись на множество тегов, это еще не гарантирует, что он будет регулярно заходить на сервис в поисках новых неотвеченных вопросов по этим темам. Нужно сделать так, чтобы новые вопросы сами находили бы нужных специалистов. В этом направлении у нас есть две идеи.
Мы планируем ввести «усиленную» подписку на теги. Если ты усиляешь подписку на тег, то все новые вопросы по этому тегу будут высылаться напрямую тебе на почту. Особенно эта функция важна для тех тегов, вокруг которых пока не сформировалось регулярное сообщество специалистов.
Второе, что мы хотим — дать возможность звать в вопрос нужных специалистов, высылая им личное уведомление с просьбой ответить на вопрос. Для этого в каждом вопросе мы будем рекомендовать тех пользователей, которые до этого наилучшим образом проявили себя в тегах вопроса.
3. Улучшить качество и тегирование вопросов
Отвечать хочется на «умные» вопросы. Но практика показывает, что зачастую вопрос кажется глупым только потому, что его автор плохо или безграмотно сформулировал свою мысль. Среди нас не так много людей, которые умеют гладко и убедительно высказываться. Почему бы не просить таких людей помогать нам?
Мы планируем ввести коллективное редактирование вопросов. По примеру того, как у нас уже работает коллективное редактирование тегов. Вместо того, чтобы жаловаться на смысл вопроса или его грамматику, приговаривая таким образом вопрос к удалению, у каждого будет возможность попытатся этот вопрос исправить.
Редактировать можно будет не только суть и детали вопроса, но также и теги. А это позволит нам опять же ускорять доставку вопросов до нужных специалистов. Ведь задающий вопрос часто не знает даже, к какой области знаний его правильнее отнести, чтобы получить наибольшее внимание.
4. Ввести систему наград за достижения
Каждый участник сообщества «Тостера» должен получать достойное призание за свои усилия. У нас уже есть такое понятие как «вклад в тег», по которому неплохо видно, в каких областях знаний силён каждый пользователь, за что больше всего его ценит сообщество. Однако, это довольно абстрактное понятие, не раскрывающее всех деталей вклада, а также не учитывающее многих деталей, напрямую не связанных с ответами на вопрос, но помогающих, тем не менее, этим ответам рождаться.
Поэтому нам нужны бэйджики, которые мы сможем выдавать в качестве наград за те достижения, которые ценим. Например, за то, что первым даёшь ответы, что откликаешься на просьбы помочь, что помогаешь правильно формулировать вопросы, что даешь качественные и полезные ответы и т. д.
Чтобы первым узнавать о нововведениях на «Тостере», подписывайтесь на наши новости в хабе «Хабрахабр — анонсы», а также на наши социальных каналы: ВКонтакте, Facebook или Twitter.