2018年 7月 8日

随着日常生活中科技对我们的影响越来越深,医疗护理领域中充满愉悦美感的现代化用户界面(UI)设计标准也在不断进化。

从平面设计到材料设计,手势控制到长篇内容,医疗保健专业人员和患者对医疗器械外观和行为的期望都受到消费性产品中UI趋势的影响。

遗憾的是,很多在消费品领域的现代化UI趋势并没有很好地转化到安全性至关重要的医疗领域相关应用中。在消费品领域,按错一个按键或者忽略一个标题通常不会造成太严重的后果。但是这种错误如果发生在医疗领域就可能带来极大的伤害。

为了应对这个问题,我们最近在2018人因工程与经济学学会(HFES)医疗健康论坛上发布了一张题为“平衡医疗用户界面设计中的美感与可用性”的海报。

在海报中,我们重点介绍了一些常见的现代用户界面(UI)设计流行趋势,并提供制作出既美观又安全的用户界面的小贴士。我们收到了与会者的积极反馈,其中包括大型医疗器械制造商、制药公司、产品开发公司和电子病历(EMR)制造商的代表。 在和与会者交谈过程中,出现了一个讨论点:设计师们一直在努力寻找安全实用与美观之间的平衡点。许多与会者之所以对我们的海报赞赏有加,是因为它清楚阐述出了一些他们曾为之付出努力的主题。

下面,我们重点介绍九种常见的用户界面流行趋势,以及设计出现代安全用户界面的小贴士。

1)仿实设计与扁平设计

扁平设计,缺乏渐变和阴影的极简主义方法,已成为现代和干净美学的代名词。但由于缺乏这些视觉线索,用户很难快速区分交互式控件和静态文本。相比之下,仿实设计元素保留了装饰性设计线索, 帮助用户快速识别交互式控件,不过它有个缺点就是看起来比较过时。

设计小提示

  • 将扁平设计用于次要的和/或非关键的控件,或者其他屏幕提示可帮助用户将交互式控件与静态文字区分开时(例如只有1-2个按钮时)。
  • 使用微妙的渐变和阴影,让控件具有微妙的3D外观而又不会显得过于沉重。

2)带标签的图标

随着屏幕越变越小,屏幕上的空间变得弥足珍贵。 为了降低视觉复杂性(并避免需要翻译),许多设计师采取只用图标来作为控件标签。虽然这样可以让外观更加整洁,但是只有图标标签可能会引起误解,特别是在医疗器械用户界面中,控件标签有时可能没办法找到可以清楚地代表其意思的图标。

设计小提示

  • 如果可能的话,把图标与简洁的文字标签搭配在一起,将会有助于说明控件的功能。
  • 使用干净的Sans Serif字体(例如,Helvetica Neue)和简单的图标来帮助降低视觉复杂性。
  • 考虑使用全都是大写字母的文字标签。大写字母可以使标签看起来更干净,因为所有字母都是相同的高度(注意: 如果是一大段文字则不要使用全部大写的字母)。

3)有意义的图形

我们可以看到,图形与图标的使用量大增。图形明显能毫无疑问地让屏幕变得更具吸引力。但是过于细腻、不清晰或不必要的图形反而会造成视觉错乱和混淆。图形应该简单并且具有视觉吸引力,而且只在能增进沟通与吸引力的前提下使用。 从本质上来说,只有在图形具有意义时才能使用。

设计小提示

  • 使用简单的插图指导用户完成某个流程。使用简单的图标帮助用户快速找到控件(例如,“添加患者”控件上的加号)或解释某项医疗器械的状态(例如,表示正在输液的动画水滴)。

4)滚动

依靠滚动功能,设计人员可以通过限制单个屏幕上的可见信息量来创建出外观更加整洁的设计。 诸如视差滚动之类的滚动效果以及对模拟物理学的应用甚至可以吸引和“取悦”用户。 如果屏幕无法滚动的话,用户应该还是会接受更为复杂的屏幕的。 此外,当关键信息和/或控件被移到“不明显位置”时,用户就很容易发生可能有害的使用错误。

设计小提示

  • 如果可能,在顶层显示所有主要信息和控件,或者提供一个清楚的可视性提示,以查看更多信息和控件(例如,选项卡、“查看全部”控件)。
  • 当滚动功能确实有必要时,要确保有强烈的视觉提示告知用户可以进行滚动(例如一个持续可见的滚动条,或在屏幕的底部边缘显示部分内容)。
  • 确保滚动的动态效果令人感觉自然而愉悦(例如:平滑运动、加速、反弹)。

5)占位符文字与标签

为了达到“一举两得”的效果,现在有一种趋势是用字段内占位符文字来替换输入字段标签。但是,一旦用户在字段中键入内容,占位符文字就会消失,只留下一个没有标签标识信息的屏幕,可能会导致误解和输入错误。字段应该具备标签标识,而且应该使用占位符文本来作为一个额外的提示、描述或者需要填写的+信息的示例。

设计小提示

  • 如果可能,在输入字段外部显示清晰可见的标签。
  • 使用占位符文字来提供需要填入的数据格式示例。确保占位符文字足够清晰,并自动替换为输入的文字。
  • 如果空间有限,考虑使用自适性字段内标签,一旦用户开始输入文字,该标签就会自动移动到字段的顶端。

6)旋转器vs传统控件

新的数据输入方法(比如说旋转器)已成为移动界面的标配。 虽然旋转器让用户可以快速循环数字,但我们的研究表明使用旋转器很容易出现错误。 有些用户难以精确地选择预期值,常常会用力过猛超过预期值或在无意中触碰到旋转器而改变了选定值。 因此,有些用户认为旋转器很麻烦且令人恼火。

设计小提示

  • 考虑使用传统的数字输入控件(例如,上/下箭头、
    数字键盘),但是可以对它们的视觉风格进行调整,让它们看起来显得更现代一点。
  • 在适当的情况下,可考虑使用其他更新颖的数据输入方法来提高速度和准确性(例如用于输入日期的日历小部件)。

7)文字大小和易读性

许多设计师使用小文字来降低视觉密度,让整个屏幕看起来更简洁、更轻快。但是使用小文字来显示关键信息,会让信息变得不好识别,增加出现有害错误的可能性。使用较大字体可能会使屏幕看起来显得更加拥挤和过时,但在呈现关键信息时应该优先考虑其易读性。当预期用户可能有视觉障碍时,非常需要使用较大。

设计小提示

  • 有疑问时,请使用较大字体显示关键信息。相对于看起来干净的屏幕,用户更加注重信息的清晰度和易读性。 
  • 为降低复杂性,可以考虑使用小型大写字体来显示非关键性信息。
  • 使用简洁明了的提示来减少屏幕上的文字量。创造强烈的视觉层次并采用适当的间距来让屏幕的外观更加平衡协调、整洁有序。 

8)风格化的字体和易读性

排版有助于让用户界面呈现出独特的个性。 风格化的字体可以 营造出一种特定的氛围。 大多数现代界面使用简洁时尚的Sans Serif字体。 但有些Sans Serif字体具有过度风格化的数字字符或很小的小数点,可能会引起危险的误解。例如在某些字体,数字“1”可能看起来像是7。请看右边,第一个“11.1 mL / hr”可以很清楚地看出是11.1,但是下面的字体看起来就很像是 “77.7”了。

设计小提示

  • 仔细考虑一下某些字符(例如,i I、l L、1、7)是否很容易引起误解。
  • 可在标题或短文本(易读性不是那么重要)中使用风格化的字体文本。
  • 确保字体x字高(从基线到小写字母字体主线之间的距离)的大小适中。 当x字高太高时,字符可能会变得不易辨认。 

9)为输入字段与控件留足空间

有些设计师为了创造干净、简约的设计,会把空间缩减到一定程度,导致缺乏清晰度并造成混淆。 例如,有的会把填写信息的地方缩减成一条细线,看起来更像是一条分界线而不像是要求用户填写信息的字段。 为了避免辨认不清并提高效率,我们建议体现需要填写的字段和控件进行,以便它们能够清晰地显示其功能。

设计小提示

  • 多使用传统的按键与字段形状,这样用户更容易知道这是一个互动式的控件。例如,空方格一直以来都是用来输入信息的字段。
  • 可以试着使用扁平填充,与/或细微渐变的方法让外观更加精细,同时又不影响清晰度。
  • 加入输入值动态效果(例如,自动跳至下一个字段、实时针对数据格式进行反馈)来让用户感觉更加现代化。

Valerie Ng是高级UX设计师,Jon Tilliss是UL Wiklund设计总监。了解关于 UL Wiklund医疗器械人因研究与设计方面的更多信息。

人因工程相关信息来源:

作者

  • Valerie Ng and Jon Tilliss

Related