Дизайн Philipp Kontsarenko
3 213

Идея читателя: Georesponsive design — сайт, который подстраивается под координаты пользователя

Руководитель иркутской веб-студии Studio38 Антон Паймышев написал в редакцию ЦП письмо с идеей Georesponsive design — когда сервис подстраивается под пользователя не только на основе устройства, с которого он открывает сайт, но и по его географическим координатам.

В мае 2010 года Итан Маркотт впервые ввел понятие отзывчивого веб-дизайна (Responsive web-design). За четыре года, что прошли с тех пор, технология стала если не обязательной в применении веб-дизайнерами, то популярной как минимум.

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

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

С введением HTML5 и его общей поддержкой всеми современными браузерами стали доступны новые функции по определению местоположения пользователя — Geolocation API.

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

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

А что, если пойти дальше и расширить понятие отзывчивого дизайна, вынести его за рамки размеров окна браузера, начать учитывать его местоположение и даже скорость движения?

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

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


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

#Интерфейсы #Дизайн #идея #интерфейсы #кейс_читателя

{ "author_name": "Philipp Kontsarenko", "author_type": "editor", "tags": ["\u043a\u0435\u0439\u0441_\u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044f","\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0438\u0434\u0435\u044f","\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 25, "likes": 12, "favorites": 1, "is_advertisement": false, "subsite_label": "design", "id": 6616, "is_wide": true, "is_ugc": false, "date": "Tue, 03 Feb 2015 15:12:53 +0300" }
{ "id": 6616, "author_id": 4, "diff_limit": 1000, "urls": {"diff":"\/comments\/6616\/get","add":"\/comments\/6616\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/6616"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114 }

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

Популярные

По порядку

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

Краткое содержание статьи:

«Привет.

Ты в курсе, что у нас появился отзывчивый веб-дизайн?
А ты в курсе, что в HTML5 есть гео-апи?
Ну так вот, можно показывать юзеру отели поблизости прямо с сайта, класс, да?

Ну все, пока.»

Ответить
3

Надо лишь произнести "georesponsive design", и в воздухе повеет свежим смузи.

Ответить
4

Какой то хер в свитере. Почему я должен его слушать?

Ответить
3

Студия-то кайфовая у них, не гоните.

Ответить
0

Теперь точно не пойду к ним на сайт.

Ответить
4

Все в кашу намешано.

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

А при чем тут дизайн? Это контекстно-зависимый контент. Дизайн может тоже меняться, но это будет вторично.

Геозависимый дизайн - это когда тот же контент отображается по-разному (окей, может быть с другой степенью детализации) в зависимости от места. Еще раз: контент отдельно, дизайн - отдельно.

Примеры такого тоже есть: например, навигаторы переключаются в ночной (темный и контрастный) режим, когда машина въезжает в тоннель. Обои Рабочего стола Windows 7 Starter в России показывали Красную площадь, в других - свои достопримечательности (правда, это не в реальном времени определялось).

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

Ответить
4

Нууу как бы очень сомнительное решение, по крайней мере приведенные примеры не совсем удачные.
Во первых в примере с туристической фирмой подстраивается не дизайн, а контент, так делают все более менее крупные компании предоставляющие услуги в разных городах и странах. Во вторых заходя на туристический сайт зачем мне гостиницы по текущему местоположению? По моему бронируют заранее, а не по приезду на место.
То же самое с рестораном. Откуда сайту знать, в ресторане я сейчас или в библиотеке в соседнем здании? И вообще заранее открытия какого-то раздела, а не главной страницы может ещё больше запутать пользователя.

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

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

Ответить

3

ЦП, верните мне 30 секунд!

Ответить
0

неплохо было бы - заплати за статью 5р но если не понравилось 100% money back

Ответить
2

Статью не прочёл, но сайт студии реально зацепил)

Ответить
0

сайт - ничего особенного, недавно здесь или на TJ писали про историю сервиса Glitter bomb, где в конвертах отправляли блестки, механика сайта был почти точно таким же, а вот текст был даже смешнее, а если нравятся крутые сайты, то сайт этой студии по мне так в разы интереснее http://uprock.pro/ эти ребята еще статейку про редизайн сайта Лебедева здесь расписали.

Ответить
1

зачем мне хостел если я поздно вечером еду домой?

Ответить
1

идея интересная в сочетании с чем - то большим! Приведу пример (немного рекламы) : мы - компания RealEye имеем подобную задумку, которую уже начали реализовывать, хотим, в конечном счете, перевести на геолокационные координаты - мы делаем технотуризм в дополненной реальности, пока проект носит федеральный характер и приурочен к 70-летию со дня победы. Смысл в следующем - турист или прохожий в Санкт - Петербурге (например) может с помощью приложения отсканировать дом книги или Казанский собор и увидеть тут же, без перехода на сайт, как здание выглядело 70 лет назад. Может увидеть его 3D модель, из разрушенного построить целое и т.п. Мы набираем обороты, и когда будет много объектов, будет очень удобно , если бы они читались и приложение выдавало объекты дополненной реальности по gps координатам.

Ответить
0

Вы опять же говорите о контенте. Дизайн у вас будет меняться? Хотя бы темы оформления, не говоря о структуре и логике UX?

Ответить
0

Конечно, будет меняться все значительно!

Ответить
1

Очевидно, статья про открытие геотаргетинга.

Вот только я не очень-то понял, чем описанное в ней изменение «дизайна» отличается от изменения «контента»?

Чем предложенные идеи отличаются от уже реализованных в сотнях приложений и сайтов?

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

Ответить
1

Человек практически заново придумал Геотаргетинг ( https://ru.wikipedia.org/wiki/%D0%93%D0%B5%D0%BE%D1%82%D0%B0%D1%80%D0%B3%D0%B5%D1%82%D0%B8%D0%BD%D0%B3 ) Браво!!!

Ответить
0

Осталось разработать отзывчивые БД для корректного определения

Ответить
0

А еще они украли знак "пешеходного перехода" и кого-то собьёт тачка.

Ответить
0

А еще они украли знак "пешеходного перехода" и кого-то собьёт тачка.

Ответить
0

Georesponsive design - это геотаргентинг другими словами.

Чувак только включился в трендовые высокие технологии. Для полной коллекции стоит еще ему написать про пользу поиска и агрегации скрытых зависимостей среди метаданных юзеров(дата-майнинг).

А если без шуток, если подобные фичи будут нормально имплементироваться, то жить станет реально лучше. А чтобы так было, надо пиздеть поменьше и развивать сообщество.

Ответить
0

Сайт XXX запрашивает Ваши координаты. Разрешить?
Да: за вами выехали
Нет: ну тогда досвидания....

PS: Да – эта уведомлялка все портит.

Ответить
0

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

Ответить
0

Так вроде бы так все сайты и работают. Зайдите на Yelp или Foursquare или к нам (https://concertwith.me). Все так и делаю)
А если соц. сеть подключить, то еще еще и только под интересы юзера сайт подстроится.
Это очень здавая идея, сайт должен стремиться подстроиться под юзера насколько это возможно, потому что у людей все меньше и меньше времени на изучение информации.

Ответить
0

Коллеги, всем спасибо за конструктивные отзывы (и за «хер в свитере» тоже=) ).

Статья довольно сырая и, если честно, не рассчитывал, что ее опубликуют.
Основной целью было поделиться мыслями с профессиональным сообществом и собрать мнения. ЦП в этом сильно помог.

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

Ну, а тем, кто хочет продолжить обсуждение по данной теме, мой скайп offinga.

Спасибо!

Ответить
0
{ "page_type": "article" }

Прямой эфир

[ { "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-уведомления
{ "page_type": "default" }