1 / 57

用户接口技术概论

用户接口技术概论. 意义 :不仅反映了计算机技术从初始到高级的发展过程,也体现了计算机图形学在计算机软、硬件发展过程中的推动作用和发展历程。 早期 : 读卡 ( 穿孔卡 ) 机 + 控制面板上的开关、指示灯; 二十世纪六十年代 : 字符终端 + 键盘 ( 逐行输入 ) 二十世纪八十年代 : 光栅显示器 + 以 WIMP 为特征的图形用户界面 二维、三维甚至多维输入设备 键盘、鼠标、光笔、数据手套、头盔、跟踪球、操纵杆、触摸板 二十一世纪 : 三维空间交互: 给用户“临境”和“沉浸”感觉的虚拟现实环境;

Download Presentation

用户接口技术概论

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. 用户接口技术概论

  2. 意义:不仅反映了计算机技术从初始到高级的发展过程,也体现了计算机图形学在计算机软、硬件发展过程中的推动作用和发展历程。意义:不仅反映了计算机技术从初始到高级的发展过程,也体现了计算机图形学在计算机软、硬件发展过程中的推动作用和发展历程。 早期:读卡(穿孔卡)机 + 控制面板上的开关、指示灯; 二十世纪六十年代:字符终端+键盘(逐行输入) 二十世纪八十年代: 光栅显示器 + 以WIMP为特征的图形用户界面 二维、三维甚至多维输入设备 键盘、鼠标、光笔、数据手套、头盔、跟踪球、操纵杆、触摸板 二十一世纪: 三维空间交互:给用户“临境”和“沉浸”感觉的虚拟现实环境; 多通道技术:人的视觉、听觉、触觉、运动等多个通道进行人机交互,以提高输入输出带宽; 自然化/非精确性:提高计算机对人随意输入信息的理解能力。 人机接口技术HCI(Human-Computer Interaction)

  3. 用户接口的发展 • Unnatural • Inflexibility • Inefficient Human-Oriented Computer-Oriented • Humanization • Intelligence • Individualities Formal Informal

  4. 新的人机交互技术 • Formal User InterfaceInformal User Interface • Multi-modal Human-Computer Interaction • Virtual Reality • Virtual Reality Modeling • Image-based Rending • Perceptual User Interface/Recognition-based Interface • Voice-based Interaction(Voice Recognition) • Calligraphic Sketch-based User Interface • Handwriting Recognition/Understanding • Sketchy Drawing Recognition/Understanding

  5. Graphic User Interface

  6. 图形用户界面GUI(Graphic User Interface) • 八十年代的人机交互技术是以WIMP为特征的图形用户界面 • W指窗口(Window):用户可以随意在屏幕上创建、移动、缩放窗口,在不同的窗口中可以执行不同的任务; • I指图标(Icon):它形象化地标示一个对象或功能; • M指菜单(Menu):提供选项功能,避免命令记忆之苦; • P指定位设备(Pointing Devices):便于用户对屏幕对象进行直接操作。

  7. 多数应用系统的人机接口都包含大量的图形成分。多数应用系统的人机接口都包含大量的图形成分。 一般而言,现有系统常包含有窗口、下拉式和弹出式菜单、图符、以及用于确定屏幕光标位置的指点设备如鼠标或空间球。 比较流行的图形用户接口有X窗口系统,Windows,Macintosh,Open Look和Motif。它们应用于文字处理、报刊系统、数据库、文件管理系统、演示系统和页面布局系统等各种应用。 图形软件包为每一种应用如工程设计、建筑设计、数据可视化、绘图、商用图表和美术师画笔程序等设计了专门的交互对话,X窗口系统与PHIGS结合就是一个例子。 在本节中,讨论图形用户接口的基本元素和交互对话技术。 用户模型 图形数据输入 输入功能 交互式构图技术 虚拟现实环境 图形用户接口

  8. 对特定应用而言,用户模型是设计对话的基础。对特定应用而言,用户模型是设计对话的基础。 用户模型说明所设计的系统能做什么,应具备什么样的图形操作。 它指明能显示的对象类型以及如何管理对象。 如果图形系统是用来作为建筑设计的工具,则用户模型要说明该软件指定墙、门、窗和其它大楼成分从而构造和显示大楼视图的方法; 同样,对一个设备布局系统,对象被定义成一组家具(桌子、椅子等等)而应具备的操作功能则包括在布局范围内指定一件家具位置或移动位置; 电路设计则可在整个电路设计中使用电子或逻辑元件作为对象,提供增加元件、删除元件及有关定位操作。 用户对话的所有信息必须按应用的语言来表达,不引入特殊的数据结构或其它对用户来说不熟悉的概念。 本节所讨论的是在构造用户对话时的一般考虑。 用户模型

  9. 可视表示既用于应用中管理的对象,又用于对应用对象进行的操作。可视表示既用于应用中管理的对象,又用于对应用对象进行的操作。 窗口系统为用户提供一个窗口管理接口,并提供窗口显示和管理功能。 窗口系统的一般功能有:打开和关闭窗口、对窗口重定位、缩放功能以及带内裁剪和外裁剪的显示等。 典型窗口包含拉杆、按键、菜单和图符等用于选择各种窗口操作。 用来代表家具或电路元件等对象的图符称为应用图符。 代表旋转、放大、比例、裁剪和粘贴等动作的图符称为控制图符或命令图符。 某些通用系统如X窗口系统和WindowS可提供多个窗口管理程序,从而使不同风格的窗口可同时在各自的管理程序控制下实现。 窗口管理程序可以按特定应用要求来设计; 另一些窗口系统则针对一种应用及窗口风格来设计。  用户模型:窗口和图符

  10. 通常,交互式图形接口提供多种选择动作的方法。通常,交互式图形接口提供多种选择动作的方法。 例如: 选项的选择可通过将光标指向一个图符然后按下不同的鼠标键来实现; 也可以通过下拉或弹出式菜单来选择; 还可以通过键入命令来选择。这使软件能适应不同熟练层次的用户。 对经验不多的用户来说,一个有较少种类且容易理解的操作集加上详细的提示的接口,要比一个有复杂的操作集的接口要高效得多。 另一方面,有经验的用户需要速度。 这意味着较少的提示和来自键盘或多种“鼠标-按键”的输入。 同样,帮助功能也可以分成几个层次来设计, 使初学者可以进行较详细的对话; 较有经验的用户则可以减少或去掉提示和消息。 帮助功能可以包含一个或多个辅导性应用来介绍该软件的功能和使用方法。 用户模型:用户适应性

  11. 一致性是接口设计中需要考虑的要点之一。例如:一致性是接口设计中需要考虑的要点之一。例如: 一个特定的图符应该始终只有一个含义而不能依靠上下文来代表多个动作或对象。 另外的一致性例子有: 菜单总是放在相同的关联位置使用户不必去寻找特定的选择; 总是使用相同的组合键来代表同一个动作; 总是使用一种彩色编码从而使相同的颜色在不同情况下不会有不同的含义。 一般来说,一个复杂的,不一致的模型不仅难于被用户理解,而且工作效率低。 提供的对象和操作应设计成一个最小的和一致的集合以便使该系统容易学习,但不能过于简化以致于难于使用。 用户模型:样式一致性

  12. 接口的操作应该组织得容易理解和记忆。 模糊的、复杂的、不一致的和缩写的命令格式会导致软件使用时的混淆和低效。 对所有删除操作使用同一个键比对不同类型的删除操作使用不同的键来得容易记忆。 图符和窗口系统也帮助减少记忆量。 不同类的信息可以分别显示在不同窗口中,因而在不同的信息重迭显示时不必依赖于记忆。 可以简单地在屏幕的不同窗口中保留不同的信息,并轮流在窗口之间转换。 通过显示代表各种对象和操作的容易辨认的图符可以帮助减少记忆量,可以简单地通过选择图符来选择它所代表的动作。 用户模型:减少记忆量

  13. 在一系列操作中,回退和取消机制是用户接口的另一个公共的特点。在一系列操作中,回退和取消机制是用户接口的另一个公共的特点。 回退可有多种形式来控制。 一个标准的UNDO键或命令可用来取消一次单个的操作。 有的系统可以回退若干步操作,这使得可把系统退回到某些特定的位置。 在具有多步回退功能的系统中,所有输入均被保存。 有时操作不能被退回,这时,接口应在确认操作之后再进行工作。 设计一些好的诊断程序和提供出错消息可帮助确定发生错误的原因。 接口通过对可能导致错误的一些动作进行预测来减少错误可能性。 例如 当没有选中对象时不允许移动一个对象位置或删除对象; 当选中的对象不是“线”时不允许选择线属性; 当剪贴板上没有对象时不允许选择粘贴操作。 用户模型:回退与出错处理

  14. 用户接口反馈的目的是让用户了解对话过程中每一步动作的进展情况。当反应速度很高时尤其重要。用户接口反馈的目的是让用户了解对话过程中每一步动作的进展情况。当反应速度很高时尤其重要。 系统接收到每一次输入后会给出某种类型的反应。 反馈信息应足够清晰使其不易被忽略,但也不能过分突出以至中断用户的注意力。 为了提高反应速度,常采用与所用设备操作特性相结合的反馈技术。 对不同类型的反馈可设计专用符号。 某些类型的输入要求有回显反馈: 用户模型:反馈处理

  15. 图形程序使用若干种输入数据。 描述一张图需要确定坐标位置数值、字符串参数数值作为变换参数的标量值、指定菜单选项数值和标识图成分的数值。 任何一种输入设备都可以用来输入各种图形数据,但有些设备用来输入某种数据时比其它设备更适合。 按设备输入的数据类型而进行的逻辑输入设备分类: LOCATOR:指定坐标位置(x,y)的设备(定位设备) STROKE:指定一组坐标位置的设备(笔画设备) STRING:指定文字输入的设备(字符设备) VALUATOR:指定标量值的设备(定值设备) CHOICE:选择菜单项的设备(选择设备) PICK:选择图的组成部分的设备(拾取设备) 六种逻辑输入设备中的每一种均可在任一硬件设备上实现,但某些硬设备对某种数据来说比其他设备更方便。 图形数据的输入

  16. 交互地选择一个坐标位置的标准方法是用屏幕光标定位。交互地选择一个坐标位置的标准方法是用屏幕光标定位。 可使用鼠标、游戏棒、轨迹球、太空球、姆指轮、转盘、数字化仪的触笔或手动光标以及其他光标定位设备来实现定位。 当屏幕光标到所要位置时,按下某一键激活对该屏幕点坐标的存储。 键盘可以几种方式作为定位设备来使用: 通用键盘一般有四个控制键将光标向上、向下、向左和向右方移动; 增加另外四个键,就可以将光标沿对角线方向移动; 将选择的光标键连续地压下可实现光标的快速移动; 作为一种选择,游戏棒、游戏盘、轨迹球或姆指轮可装在键盘上用来控制相应的光标移动; 最后一种手段,可以键入坐标值,但这是很慢的,且要求知道精确的坐标值。 光笔也用来输入坐标位置,但必须做某些特殊的工作。 图形数据的输入:定位设备

  17. 这一类逻辑输入设备用于输入一组顺序的坐标点。这一类逻辑输入设备用于输入一组顺序的坐标点。 笔画设备的输入相当于多次调用定位设备,输入的一组点常用于显示折线。 许多用于产生定位输入的物理设备均可以用作笔画设备。 鼠标、轨迹球、游戏棒、或数据板手动光标的连续移动的信号经转换成为一组坐标位置值。 图形数据板是一种普通的笔画设备。 数据板的连续模式可通过按键激活。 当光标在数据板表面上移动时,就产生一组坐标值。 这样的过程用于允许画家在屏幕上画景的画笔系统和对布线图跟踪并经数字化后存储的工程系统中。 图形数据的输入:笔画设备

  18. 最基本的用于字符串输入的物理设备是键盘。 输入的字符串常用作图的标记。 另一些物理设备也可用来在写字模式下生成字符图案。 这时通过笔画或定位设备在屏幕上逐一画字符。由一个模式识别程序按预定义的图案来翻译出字符来。 图形数据的输入:字符设备

  19. 这一类逻辑设备在图形系统中用来输入标量值。这一类逻辑设备在图形系统中用来输入标量值。 定值设备用于设定各种图形参数,比如旋转角度和比例因子, 还用于为特定应用设定物理参数(温度、电压等级、强度因子等)。 用来提供定值输入的典型的物理设备是一组控制旋钮。 通过旋转旋钮可输入在预先指定的任意范围内的浮点数。 向一个方向旋转旋钮增加输入值而向相反方向旋转则减小输入值。 除旋钮外,拉杆电位器有时也用来将线性运动转换成标量值。 任何一个带有一组数字键的键盘都可用作定值设备,用户可直接键入浮点格式的数值。这比使用旋钮或拉杆电位器来得慢,但比较简单。 游戏棒、轨迹球、数据板和其他交互设备可以在将压力或运动对照一个标量范围解释后改装成为定值输入设备,向一个方向的移动增加输入的标量值,而相反方向的移动则减小标量值。 提供标量输入的另一种技术是在屏幕上显示拉杆、按键、旋转式标尺和菜单。 图形数据的输入:定值设备

  20. 图形软件使用菜单来选择程序设计选项、参数值和构造对象形状。选择设备定义为从一组任选项中给定一个选择。图形软件使用菜单来选择程序设计选项、参数值和构造对象形状。选择设备定义为从一组任选项中给定一个选择。 常用选择设备有一组按键、光标定位设备如鼠标键盘的光标键和触摸板等。 作为独立部件设计的功能键常用来输入菜单选择。 通常每一个按键是可编程的,它的功能可以按不同应用来改变。 单用途按键有固定的、预定义的功能。 可编程功能键和固定功能按键常和其它键一起包括在键盘中。 可用光标控制设备对屏幕上列出的菜单选项进行选择。 选定一个坐标位置(x,y)后,将它与每一列出的菜单项范围进行比较。 如果输入的坐标满足:xmin≤x≤xmax,ymin≤y≤ymax,则以xmin,xmax,ymin,ymax为水平和垂直边界的菜单项就被选中了。 每次只有少量选项的大菜单通常使用触摸屏幕,使用鼠标这样的光标控制设备时,选定的屏幕位置要和每一菜单选项所在区域比较。 选择输入的替代方法有键盘和声音输入。 图形数据的输入:选择设备

  21. 这一类逻辑设备的功能是选择图形对象。用于选择对象的典型设备与选择菜单的相同:光标定位设备。这一类逻辑设备的功能是选择图形对象。用于选择对象的典型设备与选择菜单的相同:光标定位设备。 可以用鼠标或游戏棒将光标定位在显示结构的图元上然后按下按键,光标位置被记录下来后必要时经过几个层次的搜索定位出被选对象。 首先,将光标位置与场景中各个结构的坐标范围比较,如果某一结构的包围矩形包含该光标坐标,则找到这一拾取结构。 寻找离光标坐标最近线条的一个方法是计算光标坐标点(x,y)到每一条其坐标范围包含该点的线段的距离平方。要加速距离计算,可使用各种近似方法或其它标识方法。 寻找离光标坐标点最近线段的另一方法是指定一个拾取窗口的大小:该窗口以光标坐标点为中心,对每一候选线段进行裁剪,通过让拾取窗口变得适当地小,就找到唯一穿过该窗口的线段。 避免计算拾取距离或窗口裁剪交点的一个方法是醒目显示候选结构并让用户解决拾取异义性:可逐个醒目显示复盖光标点的结构。当醒目到所需结构时用户可以指出来。 图形数据的输入:拾取设备

  22. 通过设定输入功能,用户可指定以下选项: 何种物理设备用来为特定逻辑分类提供输入; 图形程序和设备如何进行交互(输入模式); 何时输入数据; 何种设备在输入时用来将特定数据类型传递到指定数据变量中。 每种模式分别指明程序如何与输入设备交互。 请求模式:由应用程序启动数据输入,程序和输入设备交替工作,设备处于等待状态直到提出输入请求,然后程序处于等待状态直到收到数据。 取样模式:应用程序和输入设备各自独立地操作。输入设备可能在程序处理其它数据的同时工作。输入设备的新的数据取代前面的输入数据而被存储起来。当程序需要一个新数据时,就从输入设备把当前值取走。 事件模式:输入设备启动数据输入并交给应用程序。程序和输入设备也是同时工作的,但是输入设备将数据放进一个输入队列中。所有输入数据均存储起来。当程序需要一个新数据时,就从输入队列中取。 在取样模式和事件模式下,任意多的设备可同时工作。但在请求模式下在一个时间内只能有一个设备能用来提供输入。 图形数据的输入:输入功能

  23. 各种输入选项被用来对由定位设备和笔画设备的坐标输入进行调整和解释。如:各种输入选项被用来对由定位设备和笔画设备的坐标输入进行调整和解释。如: 可以限制所有的线条或者是水平的或者是垂直的。 输入的坐标用来作为将绘制的对象的位置或边界,或用来重新安排前面已经显示的对象。 定位输入所提供的坐标值常与定位方法一起来指定显示一个对象或一个字符串的位置。 可使用一个定位设备来交互式地选择坐标位置,通常是屏幕光标。这主要是如何按选择的选项来实现对象或字符串定位。比如: 对字符串来说,屏幕上的点可用作字符串位置中心、始点、终点或其他定位选项; 对直线段来说可在两个选定的屏幕位置之间显示该直线段; 作为定位对象的一种辅助,所选位置的数据可在屏幕上回显,在回显坐标值的指引下,可调整选择位置直到获得精确位置。 交互式构图技术

  24. 有些应用需要预先说明一些对象的导向对齐方法。有些应用需要预先说明一些对象的导向对齐方法。 约束是改变输入坐标值来产生显示坐标的导向和对齐结束的规则。 可指定多种约束功能,但最常用的约束是直线的水平或垂直方向对齐。使用这个约束,我们可以在生成水平和垂直线时不必对终点进行精确描述。 水平或垂直约束通过确定两个输入的端点更接近于水平还是更接近于垂直来实现。 如果两个端点的y坐标值的差别小于x坐标值的差别,就显示水平线。否则就显示垂直线。 还可以使用另外的约束来对输入坐标进行各种对齐处理。 直线可以约束成具有固定角度,比如45°,输入坐标也可以约束到预定义的路径,比如在一个圆弧上。 交互式构图技术:约束

  25. 另一类约束在屏幕上某一部分显示线条网格。 在使用网格时,任何输入坐标位置靠到最近的两根网格线交点上。 两个光标位置均被移到最靠近的网格交点处,然后在这两个交点之间画一根直线段。 网格给出了构造对象的设施,因为一条新的线段可以很容易地与前一条线相连接,操作员只需在靠近显示线段一个端点的网格交点附近定位。 网格线之间的间距通常由用户来选定。 同样,网格可以在出现和不出现之间转换。 有时还可以使用部分网格以及在不同屏幕区域有不同大小的网格。 交互式构图技术:网格

  26. 构造图形时,有时需要在某线段端点之间连接另外的线段,由于在连接点处精确对屏幕位置定位是很困难的构造图形时,有时需要在某线段端点之间连接另外的线段,由于在连接点处精确对屏幕位置定位是很困难的 图形系统可设计成将任意一个靠近线段的点位置转换成线段上的位置。这种转换通过在线段附近建立引力场(gravity field)来实现。 引力场范围内的任意位置均被吸附到线段上最靠近该位置的点上。 引力场既要足够大以便能帮助定位,又要足够小以便不和另外的线发生重迭。 在已经显示许多线段时,引力场可能有重迭,这时可能较难正确地指定一点。引力场的边界通常不显示出来。 交互式构图技术:引力场

  27. 橡皮条方法 直线段可以用在起始点到移动的屏幕光标之间拉出一根直线的橡皮条方法来构造和定位。 先选定作为直线段一个端点的屏幕位置, 然后,当屏幕坐标移动时,显示从起始点到当前光标位置的一根线段。 当最后选定第二个屏幕位置时,得到该线段的另一端点。 除了直线段外,橡皮条方法还用来构造和定位其它对象。 交互式构图技术:橡皮条方法和拖曳

  28. 拖曳  用屏幕光标拖曳对象来移动该对象是交互式构造图常用技术之一。 先选择一个对象; 然后将光标向所需移动方向移动,选择的对象就跟着移动。 对于要在选定最终位置前探索各种可能性的应用来说,在场景中向各个位置拖曳对象是很有用的。 交互式构图技术:橡皮条方法和拖曳

  29. 素描、绘图、着色的选择有多种形式。 直线段、多边形和圆可使用前面所讨论的方法来生成。 曲线绘制可通过标准曲线形状如圆弧和样条线或手绘过程来实现。 样条曲线通过指定一组绘出曲线大概形状的离散屏幕点来交互地构作,然后系统将该组点用多项式曲线来拟合。 在手工绘制中,曲线通过数据板上触笔的路径或视频监视器屏幕光标的路径来生成。一旦一条曲线显示出来,设计者可以调整沿曲线路径上选择的点的位置来改变曲线形状。 线宽、线型和其他属性选项也包括在着色和绘图系统中。 各种笔型、笔图案,颜色组合,对象形状和表面纹理图案都可在许多系统中,特别是作为美术师工作站而设计的系统中找到。 某些绘图系统按美术师的手加在触笔上的压力来改变线宽和笔划。 交互式构图技术:着色和绘图

  30. 临境:听觉、视觉和触觉。 多通道:手势、眼神、表情、声音和触力。 虚拟现实环境VR(Virtual Reality)

  31. 下图是一种典型的虚拟现实环境。 在这种环境下交互输入用一个数据手套来实现,可以抓取和移动在虚拟景色中的对象。 计算机生成的场景通过头盔观察系统以立体投影图形式显示。 跟踪设备计算头盔和数据手套相对于场景中对象的位置和角度。 使用这个系统,用户可以用数据手套来穿越场景,并重新安排对象位置。 虚拟现实环境 • 另一个生成虚拟场景的方法是在光栅监视器上显示两个在不同刷新周期内交替出现的立体投影图,然后使用立体眼镜来观察此景。交互式的对象管理可通过一个数据手套和一个监视相对于景中对象的数据手套位置和角度的跟踪设备来实现。

  32. Why Sketching?

  33. Design/Sketch Process

  34. Prototyping • Designer build usually lots of prototypes • Get feedback on our design faster • Experiment with alternative designs • Fix problems before code is written • Keep the design centered on the customer • must test & observe ideas with users

  35. Fidelity In Prototyping • Fidelity refers to level of detail of prototypes • High fidelity implies finished or detailed • prototypes look like the final product • Low fidelity implies incomplete or lacking some detail • artists renditions with many details missing

  36. High Fidelity Prototyping • Perceptions of the customer/reviewer? • formal representation indicates “finished” nature • Architecture story: Clients view high-fidelity differently??? • Clients reluctant to make large-scale modifications • High fidelity prototypes require careful implementation • encourage precision, Get caught up in details • specifying details takes more time • Take too long • Design/Sketch – prototype – evaluate – iterate • High-fidelity prototype implies less variety • Creativity? • lose sight/track of the big picture

  37. Low Fidelity Prototyping • Give you a “script” of important events: • to use paper-based designs to do early stage study - Rapid Prototyping • leave out the details • concentrate on the important interactions • Brainstorming • put designs in a tangible form • consider different ideas rapidly • Incomplete designs • do not need to cover all cases • illustrate important examples • Present several designs to client • Allow designers to • quickly sketch ideas • test these ideas with customers • transform to a more finished design without redesign

  38. Low Fidelity Prototyping • Easier implementation • User require only kindergarten level skills • Faster iteration • Client can participate in design process as well • Instead simulate the prototype, sketches act as prototypes: designer “plays computer” and other design team members observe & record • More variety • Easier to incorporate testing changes • User can think creatively: Try different things, Easier to involve variety of specialists, Get a feel for what client likes • User can alter design Or can design on their own as well • Quality of client feedback • Client feedback starts earlier • Separation of UI code from app. code: easier to change and maintain

  39. Creating Low-Fidelity Prototypes • Materials • Paper (various sizes) • Scissors, glue, tape, knives • Markers (various colors) • Overhead transparencies • Build fast • Draw ideas quickly (don’t worry about neatness) • Start with window • Use smaller papers for things that change • Have menus ready • Think about interaction • anything customer might want to see

  40. Sketching: Specific Prototyping Techniques • (Simple) Storyboards • sketches (on paper or screen) that indicate how things look across a scenario • no user interaction at all • but still get an idea of what it might be like (and can get users involved) • Low fidelity, low cost (use early) • Extended Storyboards • Can sketch out multiple interactive paths on paper • typically user points at things on paper, you flip to prepared sheets showing how things would change • can do part of interface separately • Again, low cost / early

  41. Sketching is Good • Almost everyone starts in early stage with very rough pencil and paper sketches • Rough ideas quickly • Uncertainty • Uncertainty and ambiguity is important to have at this stage (important to creativity) • Can’t have the details before you have done the design • Fluidity is critical • Investment must be very low • Changes must be very easy • Must stay “light on your feet” and not get solidified into small range of alternatives too early

  42. Supporting Early Design • Key tasks being supported • Design space exploration • Medium for expression and “visual thinking” • Increase concreteness • Providing inspiration and points of departure • Understanding the implications of design choices • Communications • Vehicle for talking about design options with others

  43. Paper Sketches • Advantages • support brainstorming • do not require specification of details • designers feel comfortable sketching • Drawbacks • do not evolve easily • lack support for “memory” • force manual translation to electronic format • do not allow end-user interaction

  44. User-Oriented Graphics Input • User sketches ideas rapidly with electronic pad and pen • Understanding of requirements • Ease of drawing available from paper sketches • Easier to interaction with the customer • Supports informal interaction: digital ink • sketching, pen-based interaction • Idea Externalizing/Visualization • Brainstorming of ideas:Creative Design • Freedom of thought:easy editing with gestures • Automatically transforms to a “finished/Detailed” Task • Early-phase information & navigation design • Integrates multiple views:Configuration

  45. Where Sketching?

  46. Object Modeling

  47. Web Design

  48. Product Design

  49. Robot/VR Navigation

  50. UML Diagramming Requirements Understanding UML Diagramming Visual Language

More Related