Концепт: Редизайн Google News в стиле Material Design

Российский разработчик интерфейсов Георгий Квасников в своем блоге опубликовал концепт сервиса Google News — с возможностью составления сюжетов и лонгридами.

ЦП публикует материал в рубрике «Интерфейсы» с разрешения автора. 

Новости — это инструмент влияния на человеческое сознание. Основной целью новостей является предоставление обществу объективной информации о событиях в мире. 

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

Более того, журналисты очень часто описывают события в выгодном для себя свете, что можно воспринимать, как попытки манипуляции общественным сознанием. 

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

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

Исследование

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

Анализирование нынешнего оформления страницы

Для начала, необходимо найти и проанализировать все достоинства и недостатки текущей версии Google News.

Сервис запустился в 2002 году и с тех пор претерпевал лишь незначительные изменения. За 12 лет технологии юзабилити сделали огромный шаг вперед, а пользователи стали гораздо требовательней к практичности и оформлению. 

Карточки пользователей

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

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

Функциональность

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

В конечном итоге наиболее важными оказались две вещи: функциональность и визуальное оформление. 

Поведение пользователей

Чтобы быть уверенными, что исследование проведено не зря, были созданы сценарии поведения пользователей на сайте. 

Принципы дизайна

Когда всё, что нужно пользователям и, что необходимо сервису для успешного редизайна было сделано, пришло время заняться навигацией по сайту. Главное, что необходимо было сделать — это минимизировать количество шагов пользователя для достижения результата. 

Эскизы

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

Расположение ячеек

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

Шрифты

В качестве основного шрифта было решено оставить традиционный шрифт для Google — Roboto. Для статей я выбрал шрифт PT Serif, который поддерживает большое количество алфавитов. 

Дизайн

После долгой подготовки, я, наконец, занялся дизайном. Процесс занял около пяти недель, за которые были созданы макеты для каждой страницы, настройки и каждый элемент в отдельности. 

Главная страница

При пролистывании страниц вниз, левая панель сжимается, а верхняя смещается вверх. Новое оформление Google News использует 100% пространства. 

Главная страница при пролистывании

Добавление новостных источников и выбор языка

Добавление новых категорий в один клик

Новости в контексте

Ключевая функция моей версии Google News — это раздел «Сюжеты». Благодаря «Сюжетам» пользователи могут сохранять любимые статьи, заметки, медиа-файлы, которые отображают их точку зрения. С помощью этого раздела можно отслеживать каждую историю в контексте с остальными. 

Главная страница раздела «Сюжеты»

Обложка материала

Полный обзор раздела «Сюжеты»

Функциональность, удобство, чтение

Чтение статьи

Добавление в избранное

Создание собственных сюжетов

Мобильная версия

Главная страница

Источники новостей

Статья

Обложка статьи


Присылайте свои интерфейсные кейсы на interface@siliconrus.com

#Интерфейсы #редизайн #веб_дизайн #концепт #UX #юзабилити #Google_News #Material_Design

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Равиль Хабибуллин", "author_type": "self", "tags": ["\u044e\u0437\u0430\u0431\u0438\u043b\u0438\u0442\u0438","\u0440\u0435\u0434\u0438\u0437\u0430\u0439\u043d","\u043a\u043e\u043d\u0446\u0435\u043f\u0442","\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0434\u0438\u0437\u0430\u0439\u043d","\u0432\u0435\u0431_\u0434\u0438\u0437\u0430\u0439\u043d","ux","material_design","google_news"], "comments": 15, "likes": 15, "favorites": 1, "is_advertisement": false, "subsite_label": "flood", "id": 7176, "is_wide": true, "is_ugc": true, "date": "Tue, 17 Mar 2015 18:08:33 +0300" }
{ "id": 7176, "author_id": 17188, "diff_limit": 1000, "urls": {"diff":"\/comments\/7176\/get","add":"\/comments\/7176\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/7176"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199791 }

15 комментариев 15 комм.

Популярные

По порядку

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

Да, чел крутой.

Ответить
0

Ага. Только у него везде заголовки новостей и краткие описания одной длины, если вы понимаете, о чём я :)
И глаза разбегаются на полном обзоре раздела «Сюжеты»

Ответить
0

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

Это лучше, чем то, что сейчас, но опять же, всё, что угодно будет лучше, чем то, что сейчас. 3 из 10.

Ответить
0

Да, придираться можно долго. Но не факт, что потребитель заметит мелочи.

Ответить
0

Человек явно разбирающийся :)

Ответить
2

Давно слежу за ним на behance. У него редизайн википедии тоже очень крутой)

Ответить
2

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

Ответить

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

0

Новости — это инструмент влияния на человеческое сознание.

Ответить
3

Нас всех хотят чипировать, а интернет опасен для человечества.

Ответить

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

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

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

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

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

1

Гугл, возьмите сразу две. Очень крутая работа

Ответить
0

хоть убейте не нравится мне материал десигн, слишком простой

Ответить
2

Доо...
все любят убивать свой мозг и искать нужную инфу 10-15 минут.

Ответить
0

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

Ответить
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" } } } ]
Приложение-плацебо скачали
больше миллиона раз
Подписаться на push-уведомления