跳到主要内容

超越响应式设计:发现'Context First'

你不能在没有被提及的情况下被击中的情况下阅读关于移动设备的文章响应式设计。无论您是设计师,营销人员还是品牌经理,无论您所在的行业是什么,移动都是不可忽视的。但响应式设计只能让您到目前为止。只需查看断点并调整大小或堆叠内容,就不足以选中“移动就绪”复选框。还有很多需要考虑的问题。

“上下文优先”或“上下文驱动设计”意味着根据用户决定内容和体验。应该激发背景的事情包括以下内容......

01.意图

There are clues to what a user intends to do on your site

用户打算在您的网站上执行的操作有线索

我首先提到这一点,因为当我们走向一个由大数据和云驱动的始终连接的实时世界时,它很少被讨论并且非常重要。

用户的意图通常是最难预测的,如果你猜错了可能会比不尝试更具破坏性。我们可以寻找有助于改善体验的背景线索。通过用户活动和cookie搜索行为,条目页面,过去收集的数据可以决定点缀体验。

下面我将概述用户上下文的各个方面,以努力激发我们必须关注的事物的对话,以提供用户优先体验,而不是可以传递给用户或与用户无关的静态,不知情的体验。

02.带宽

我们都知道页面和界面速度现在是用户体验的基本部分。即便谷歌也要强制执行,从搜索引擎优化的角度惩罚那些根据网页性能降低排名。

使用智能文件压缩,缓存和本地存储下载的体验越少,您将内容传递给用户的速度就越快。我们生活在这个苛刻,不耐烦的社会意味着用户不会等你,尤其是当你的竞争对手提供更时尚,更快速的替代品时。

您的体验有哪些方面可以省略以提供更快的体验?告诉用户他们的连接速度很慢或指示他们看到非高清内容比旋转加载栏更好。与往常一样,不要强迫这一点,而是让用户选择默认输入以启用它有意义的地方。带宽对于消费者来说变得越来越昂贵,因此您可以从中查看或购买它。

03.设备和输入支持

It's not just about screen size - screen resolution, input support and device capability should all be considered

这不仅仅与屏幕尺寸有关 - 屏幕分辨率,输入支持和设备功能都应该考虑

用户代理检测或响应断点确定它们是否位于平板电脑,掌上电脑或笔记本电脑上,这只是第一个开始的地方。今天的用户就像雪花一样。虽然没有用户是相同的,但是很棒的体验会吸引任何用户。还应考虑屏幕分辨率,尺寸,输入支持和设备功能,以帮助塑造和提供逐步增强的体验。需要在我们的设计和内容中考虑多点触控支持。

当我们移过鼠标并点击时,我们必须考虑用户将使用和期望的所有其他交互。幻灯片,轻弹和捏合是通常预期的行为,当它们存在时,会创建一个惊喜和喜悦因素,只会进一步拉入并保留用户。

Facebook通过其滑出菜单和聊天气泡向我们展示了这一点。为方便起见,Google添加到主屏幕对话框是一个如何用新的用户界面范例和模式回答用户的行为和意图的示例。

04.电池电量

Help the user who's low on battery and they'll love you forever

帮助电池电量不足的用户,他们会永远爱你

排水是一个真正的问题,充电站和案例并没有解决我们所有的果汁问题。

知道用户电池电量不足的人可以通过减少颜色深度或文件下载来调整他们的体验,以帮助增加他们的上网时间并赢得他们的注意力。

使用HTML5扩展设备API为我们通过浏览器提供了一个全新的层。使用硬件加速或减小文件大小的格式对图像和视频进行编码。 SVG,webp和mp4意味着更少的下载,减少可怕的电池消耗。

05.位置

If the user lets you know where they are, give them some useful information in return

如果用户让您知道他们在哪里,请给他们一些有用的信息作为回报

了解用户的位置,在许多情况下,邻近应指示您的消息和界面。

  • 您的用户是否距离您的商店位置有步行距离?提供步行路线,让他们有动力或理由去拜访您。
  • 是下雨吗?为他们提供品牌雨伞租赁服务。
  • 您是否有来自特定关键字的用户?更改特定于其搜索词组的标题中的主要内容或潜在客户。

我不能告诉你餐厅或服装品牌的数量会赢得我的业务只是通过一个小部分根据我来自哪个关键字向我提供我的问题的答案。不用担心,这些令人沮丧的边缘案例的解决方案是可用的,应该被接受作为扰乱,惊喜和取悦你的观众的方法:

  • 带宽检测库,如Netbiscuits或来自负载均衡器的iRules
  • 浏览器功能 - 现代化和caniuse
  • 位置检测 - HTML5地理位置
  • 响应式图像 - Gumby响应式图像
  • 响应式设计框架 - Gumby,Bootstrap,Skeleton
  • 电池电量 - 电池状态API
  • 屏幕亮度 - 亮度API

在最近冲浪或购物时,您在实践中看到过哪些例子或者对此感到非常惊讶?

单词和插图:皮特塞纳

皮特塞纳是的创始人数字外科医生,位于康涅狄格州纽黑文的一家数字营销机构。一个混合设计师/开发人员,为品牌创造独特而强大的体验,如果Pete休息一下,他可能正在阅读,自学东西,攻击Crossfit或单板滑雪。

喜欢这个?阅读这些!

您如何看待上下文驱动的设计?在评论中分享您的观点。

话题



翻译字数超限