个性化阅读
专注于IT技术分析

移动可用性基础指南

本文概述

移动可用性不仅是缩小网站规模以适应各种设备。这是要注意人们使用移动设备的方式, 并了解移动体验与用户一样独特。

移动设备的可用性设计与其感觉和外观以及行为方式一样重要。人们使用手指(或更具体地说, 通常是拇指)与屏幕进行交互, 而不是使用传统的鼠标和键盘桌面代理。这意味着移动设计比台式机具有更多的触觉体验。用户感觉就像他们看到的一样。

不管是好是坏, 台式机代理的障碍已不复存在, 移动设计师面临着可用性方面的一组新的UX设计原则。

尽管没有一种千篇一律的移动可用性, 仅是因为屏幕和手指的尺寸各不相同, 以下可用性原则将事情朝着正确的方向发展:

  1. 了解你的用户
  2. 了解背景
  3. 遵循经验法则
  4. 将内容放在首位
  5. 保持(触摸)目标
  6. 用手势呼应现实世界
  7. 使用渐进式披露

在本文中, 我们将更详细地介绍这些内容, 但首先, 让我们讨论移动友好型设计的一些关键点, 以及该领域知名设计师的研究发现和建议。

超越像素–移动设计与工业设计相遇

由于移动设计具有极高的触感, 因此它超越了视觉设计和屏幕上的像素。移动可用性要求设计师考虑工业设计的要素和人为因素。也就是说, 为真实的物理对象进行设计。尽管移动用户体验设计师实际上并不是在设计物理产品本身, 但移动界面设计师仍应了解用户如何实际体验应用程序。

赫尔曼·米勒(Herman Miller)Embody主席。工业设计与移动设计相遇

移动可用性与椅子设计有什么关系?超出你的想象。 Herman Miller Embody主席(来自Herman Miller)

触摸屏要求UX设计人员考虑人体工程学, 这与物理产品的设计人员非常相似。由于人们与移动设备进行物理交互, 因此舒适感很重要。没有人愿意坐在不舒服的椅子上, 以同样的方式, 没有人希望使用会导致疼痛或不适或只是导航不便的应用程序。

正如工业设计师花费大量时间来研究和观察用户一样, 移动UI设计师应该继续努力观察, 理解和建立同理心, 以便在直接进入设计屏幕之前真正认识到人们如何使用移动设备。

了解人们如何使用设备涉及两件事-他们持有设备的字面意义, 物理方式以及使用它们的环境。这两件事对于移动体验的可用性与屏幕本身一样重要。

可用性研究–人们如何使用移动设备

用户体验设计师兼4ourth Mobile总裁Steven Hoober是移动研究的关键人物之一。 2013年, 他对人们如何握住和使用手机进行了广泛的研究, 并在《用户如何真正握住移动设备?

但是他并没有就此止步。他的研究仍在继续, 并且随着该领域的日趋成熟, 他也开始引入其他移动研究数据。

在2017年, 他撰写了一个由三部分组成的系列文章, 以更新他的初步发现, 指出新的主要学习内容, 并着力恳求设计师停止将他最古老的作品作为标准。他说, 特别是其中一个图示(如下所示), 仍在继续作为用户如何握住手机的标准, 但作为唯一标准并不正确。

移动设备上的拇指滑动区域会影响移动可用性

经常引用但不正确的用户如何握住电话的视图(来自UX Matters)

实际上, 截至他的2017年著作, 用户握持手机有六种不同的方式, 其中75%的用户仅用拇指触摸屏幕, 而只有50%的用户仅用一只手握住手机(手指设计, 触摸和人们第1部分)。

用户手持手机的方式会影响手机的可用性

人们握住手机的六种常见方式(来自UX Matters)

有了这些发现, 很明显, 传统的桌面F形模式是用户在屏幕上进行两次水平眼动, 然后在左侧进行一次垂直眼动, 这与移动设计不同步。

热图显示了可用性研究中的F模式

来自眼动追踪研究的Nielsen Norman组F模式热图(来自Nielsen Norman Group)

尽管大多数UX设计人员都非常熟悉用于在桌面设计中读取Web内容的F形模式, 但这种模式无法很好地转化为移动设备。

移动设备中缺少F形图案也是避免使用汉堡菜单折叠主导航或隐藏重要内容的原因之一, 也是为什么移动设备设计应与台式机不同的原因。

如果不是F模式, 那又如何?

移动用户倾向于首先看屏幕的中心。该中心还代表他们在大多数智能手机上最容易接触和触摸的地方。当用户到达屏幕的最外面的角落时, 触摸精度会降低。

瞄准屏幕中央的主观看区域可提高移动可用性

用户最常查看和触摸屏幕的中心。 (来自UX问题)

当然, 移动不止于手机。用户拿着平板电脑时仍然倾向于用拇指, 但通常情况下, 他们拿着手机的方式与拿着手机的方式不同。相反, 他们倾向于双手握住平板电脑的侧面, 并用拇指触摸屏幕。

移动设备-用户拿着平板电脑的典型方式

无论是纵向还是横向模式, 用户都倾向于从侧面握住平板电脑, 并用两个拇指触摸屏幕。 (来自”为触摸而设计”)

移动设备的7个指导原则

由于移动设备的大小以及人们使用它们的方式的差异, 因此没有”一刀切”的设计标准。相反, 这是设计人员应了解的一组原则和概念, 以提高移动设备的可用性。

以下原则可帮助设计人员考虑触摸和人体工程学, 以使移动体验更加愉悦和用户友好:

1.了解你的用户

设计师在移动设计中可能犯的第一个错误是, 假设每个人都以相同的方式使用设备或使用相同的设备。尽量避免这种假设。

下一个错误是假设来自先前研究的所有现有数据(无论是来自二手来源还是先前进行的主要研究)永远对用户而言是正确的。用户不断变化, 技术不断变化, 用户行为也可能千差万别, 因此, 不断进行研究对于保持最新状态至关重要。

在研究中, 史蒂文·霍伯(Steven Hoober)建立了用户使用智能手机的六种方式, 但是你的目标用户可能主要以不常见的一种方式持有手机。例如, 一个专门为老年人记录有关用药信息的应用程序可能会有一些独特的要求。这个特定的人群可能会遭受损害, 这些损害可能会影响他们持有(和看到)移动设备的方式, 这对于作为设计师来说很重要。

可用性研究是了解用户的关键

移动设计的可用性研究应包括在自然环境中观察用户的设备。

有几种获取用户信息的方法。一个很好的起点是进行网络分析(如果可用), 并找出用户正在使用的设备。另一种选择是调查用户有关其设备及其使用活动的信息。体验采样是在设定的时间点吸引用户的另一种选择。而最强大的研究是:实际使用设备观察野外用户。

关键要点:使用移动设备研究并观察用户, 以真正了解如何为他们设计。

2.了解使用环境

这与了解你的用户密切相关, 但值得一提的是它很重要。从字面上看, 移动意味着”可以自由移动”。使用移动应用程序时, 大多数人不会坐着不动或将注意力集中在其设备上的100%。他们经常在做其他事情-逛商店, 看电视, 锻炼身体, 坐在餐厅或开车。

人们在哪里使用他们的设备与他们使用设备的方式一样重要, 这可能会影响整体设计和体验。例如, 正在运行的应用程序可能与银行应用程序具有非常不同的用例。

了解使用设备所处的环境对于移动可用性至关重要

上下文是关键:不同的移动应用程序将具有不同的上下文和使用位置。

了解用户与移动设计进行交互的方式和方式, 以及他们在使用设备时正在进行的其他操作, 可以帮助设计师创建适用于其用户的应用。

关键要点:用户在使用移动设备时会做各种各样的事情, 并且可能不会全神贯注地关注应用程序。

3.遵循经验法则

由于用户主要用拇指导航移动设备, 因此移动设计应设计为拇指而不是鼠标单击。这意味着用户需要在屏幕上访问的所有内容都应在拇指容易触及的范围内, 而不要求他们不自然地伸展或扭曲手。

这就是为什么响应式设计如此重要, 以及为什么移动设备上的单列布局优于多列的原因之一。使用多列会自动缩小屏幕空间, 并将一些重要内容放在拇指区域之外, 从而使用户难以访问。

响应式设计在移动可用性中起着重要作用

单列布局比多列布局使用户更容易用拇指导航。

关键要点:确保关键内容和导航在手指可及的范围内。

4.将内容放在首位

这显然有赖于工业设计。正如乔什·克拉克(Josh Clark)在”为触摸而设计”中指出的那样, 工业设计的主要原则之一是内容应始终显示在控件上方, 以便用户的手不会挡住视线。

在传统的网页设计中, 导航首先位于屏幕的顶部, 内容位于其下方, 但工业设计则相反, 移动设计应紧随其后。

由于用户查看和触摸屏的方式不同, 最重要的内容应位于屏幕中央, 其他关键导航控件位于底部。

优先处理移动UX设计的内容

将关键内容置于控件之上有助于提高移动可用性。

在平板电脑中, 此建议稍有变化, 但仍然侧重于允许用户通过用拇指触摸并防止手指阻挡内容来进行导航。重要内容和导航控件现在应该移到屏幕的两侧。

平板电脑的移动可用性-将导航移至屏幕侧面

平板电脑上的移动应用程序设计(作者Cuong Vu)

重点介绍:将最重要的内容放在屏幕中央, 然后将主导航控件放在最适合设备且手指不会遮挡内容视图的位置。

5.保持(触摸)目标

无论使用哪种设备, 移动设备都需要针对触摸进行设计。但是触摸是不精确的。没有两个用户的拇指大小完全相同, 这不像考虑鼠标单击那样简单。

UX机构Big Medium的创始人, 《触摸设计》一书的作者乔什·克拉克(Josh Clark)表示, 移动可用性确实很重要:44。

最佳的触摸目标是7x7mm, 相当于大约40像素。但是, 考虑到各种观看尺寸, 44像素是覆盖触摸区域并避免用户错误的理想空间。

触摸目标尺寸对于移动设备的可用性至关重要

底部的蓝色方块显示44像素(填充20像素)作为触摸目标, 这是设计人员应考虑的最低移动可用性。

将触摸目标设置得更大一点有助于覆盖用户与其设备进行交互的环境和情况, 通常不会给予他们全神贯注的关注(请参阅了解使用环境)。

关键要点:触摸不精确且不可预测。扩大触摸目标区域以适应。

6.回声现实世界中的手势和动作

让用户在适当的微交互作用下滑动, 翻转和收缩, 但要注意物理定律, 或更具体地说是运动定律。请记住, 设计的响应应该基于用户采取的行动才有意义。

例如, 如果用户只是在屏幕上滑动卡片, 则卡片从屏幕上移开的运动看起来应该与施加的力成比例, 这意味着它可能不应缓慢爬行或飞得过快。

带有滑动功能的手机屏幕

屏幕根据用户的手势滑动和滚动。 (由约翰·弗朗西斯设计)

移动中的微交互功能有助于使应用程序栩栩如生, 并基于触摸为其提供更多上下文。有关改善微交互体验的更多信息, 请阅读设计师OndřejDostál的文章”通过微交互改善用户体验”。

关键要点:手势和交互使移动UI触摸起来更加自然, 但不要过度操作。

7.使用渐进式披露

这意味着在正确的时间为用户提供正确的内容以及正确数量的内容, 并提供在需要时提供更多收益的能力。

实际上, 这意味着设计人员应避免一次用所有内容轰炸用户, 但同时, 最重要的信息也不应隐藏在导航后面。确保主要内容显示可以满足主要用户的需求, 然后添加控件以允许用户在需要时进行更深入的挖掘。

Fresh Air应用程序仅在其主屏幕上显示当前温度和降水量, 然后允许用户水平滚动(使用相关手势和动作)以逐时获取天气信息, 从而优雅, 直观地处理渐进式显示。

Fresh Air应用程序使用渐进式披露来首先为用户提供最重要的内容。 (来自新鲜空气)

关键要点:仅显示对用户最重要的内容, 并为他们提供所需的控制权, 以根据需要找到其余的用户。

把它放在一起

移动设计比一屏或一台设备更广泛, 更复杂, 并且移动体验并不普遍。通过遵循一些通用的可用性原则并有点像工业设计师的思想, 移动设计师可以遵守基本的人体工程学标准, 无论用户使用什么设备或在哪里使用, 都可以为用户带来舒适和愉悦的移动体验。

• • •

参考资料和进一步阅读

以下是本文中使用的来源列表, 并提供了一些建议供读者阅读以进一步了解如何提高移动可用性。

Stephen Hoober关于UX问题的文章涵盖了为移动可用性设计背后的广泛研究和科学:

手指, 触摸和人的设计第1部分

手指, 触摸和人的设计第2部分

手指, 触摸和人的设计第3部分

要深入了解各种屏幕类型的移动可用性和设计, 请阅读乔什·克拉克(Josh Clark)的书《为触摸而设计》以及他的《事件分开:为触摸而设计》演示文稿的概述。

《科学世界》杂志发表了一篇研究文章《移动接口的启发式评估:新清单》, 其中包含基于Jakob Nielsen的10种用户界面设计的可用性启发法的非常详细的针对移动设备的指南PDF。

• • •

在srcmini设计博客上进一步阅读:

  • 电子商务UX –最佳做法概述(带有信息图)
  • 以人为本的设计在产品设计中的重要性
  • 最佳UX设计器产品组合–启发性的案例研究和示例
  • 移动接口的启发式原理
  • 预期设计:如何创建神奇的用户体验
赞(0)
未经允许不得转载:srcmini » 移动可用性基础指南

评论 抢沙发

评论前必须登录!