Real World Applications

1
Real World Applications

• Based on
• IBM RealThings

Presented by Boaz Moskovich Haim Kriger
2
What will we see today?

• What is a Real-World application?
• RealThings guidelines
• More guidelines that RealThings didnt mention
• Real-World applications pros cons
• What we thought about the articles

3
IBMs Ease of Use website

• This website provides information for developers
  and designers about GUI design methodologies
  
• How to provide the user efficient and easy GUI
• Gives examples and guidelines
• Contains a section of exploratory GUI including
  RealThings
  

4
Whats wrong with traditional GUI?

• Todays applications may consume up to 30 of the
  display with title bars, menu bars, tool bars and
  status lines
  
• Users who wish to perform a simple task are
  turned off when faced with such an interface
  
• Most users use only about 20 of a typical
  application functionality

5
The alternative Real-World application

• Take advantage of the user experience and
  knowledge of the real world
  
• Give the application the appearance it would have
  if existed in the real world
  
• The goal is KNOWLEDGE TRANSFER from the real
  world to the application domain

6
Real-World application example
VS.
7
Abstract and Real-World metaphores

• Abstract metaphors
• Takes concepts from the real world desktop,
  files, folders
  
• Doesnt behave exactly like in the real world.
  You cant drop files on your printer to get them
  printed
  
• Usually represnted by small icons
• Real-World metaphors
• Try to look and behave exactly like real world
• Even when it doesnt make sense

8
The examples products
9
RealPhone

• A phone application created by IBM
• Has the look of a real phone
• Was created based on the RealThings guidelines
• It supports dialing and answering, managing phone
  lists, and speed dials

10
RealCD

• An audio-CD player created by IBM
• Was created based on the RealThings guidelines
• It supports playing CDs, creating songs
  PlayLists, changing the disc cover
  
• Its interface was designed on a plastic CD case
  IBM thought it would make the object more
  recognizable

11
QuickTime 4 player

• Quick time is a media player created by Apple
• Looks like a real PDA device (shape ,size
  ,color)
  
• Presents a completely redesigned UI in comparison
  to QuickTime 3 (which used traditional GUI)

12
The IBM RealThingsGuidelines
13
IBM RealThings

• A set of design guidelines for creating a
  Real-World interface
  
• Talks about the visual and behavioral aspects
• Written as theoretical exploratory document

14
Give the application a natural appearance

• Guideline 1
• Give the application the physical shape of the
  object it mimics
  
• Dont use rectangular windows and shapes, but use
  smooth curves

15
Give the application a natural appearance

• Why?
• It will help the user to recognize the objects
  and their functions
  
• Novice users can use it immidiately

16
Give the application a natural appearance

• Whats wrong with this natural appearance?
• Window borders, title bar, window management
  controls, meaningful control labels are all gone
  
• How do I minimize the application?

17
Give the application a natural appearance

• Another problem
• Some applications rely on the OS window
  management system to perform their task
  
• For example the Macs Zoom utility
• The QuickTime 4 developers did not use the
  standard OS window management system
  
• As a result, the Zoom utility cannot magnify the
  QuickTime application

18
Use natural looking controls

• Guideline 2
• Give real world look to controls.Examples
  handles, drawers, switches
  
• Keep the control operation simple such as a
  single mouse click
  
• Dont use controls that are difficult to
  manipulate with a mouse

19
Use natural looking controls

• Natural looking controls
• Helps the user to identify them
• The user knows what to do with them intuitively,
  without reading the help files

Regular appearance
When anwering a call
20
Use natural looking controls

• In QuickTime 4 this guideline was not followed
• To change the volume, the user needs to
  manipulate a thumbwheel like control
  
• The designers ment that the user will push the
  mouse button on the control, and drag the mouse
  up to increase the volume
  
• But the user might think that he can move the
  thumbwheel only in the visible part, with a lot
  of small movements, like he used to in the real
  world

21
Give the application a 3D look

• Guideline 3
• In order to give the application a 3D look (2D
  with perspective)
  
• Create a 3D model of the object
• Choose the best looking angle and shading
• Create the applications interface bitmap based
  on this 3D model
  
• If the processor resources allow it, create a
  full 3D emulation
  
• Render the 3D image on runtime
• give the user the ability to choose alternate
  viewing points

22
Give the application a 3D look

• Why showing the application in perspective is
  good?
  
• The application will look more natural
• Pespective will help to recognize object that is
  obscured by another one like a drawer
  
• Rendering the 3D model in the development phase,
  will take from the designer time, but wont cost
  resources on runtime
  

23
Give the application a 3D look

• The problems with perspective
• Choosing a bad angle might make it harder to
  recognize the contorls
  
• Implementing edit box in an angle is much harder
  than in 90 degrees
  

24
Give the application a 3D look

• Application with a 3D emulation on runtime
  Apples ipod

25
Give the application a 3D look

• The advantages of a 3D emulation
• It looks more realistic
• Its more attractive
• It can support more functions with a 3D shape
  buttons on the top and on the sides, not only in
  the front
  
• The user can choose his prefered viewpoint

26
Give the application a 3D look

• But the donwsides are
• It might consume a lot of computer resources
  memory, cpu time
  
• Very hard to implement as interactive
  application not like the ipod VR example that
  only changes viewpoints
  
• Might irritate the skilled user

27
Provide sound indications and feedbacks

• Guideline 4
• Provide sounds that are consistent with their
  real world equivalents
  
• 3 types of sounds
• Background sounds like ticking sound of a
  clock
  
• Normal function sounds like a click sound when
  a key is pressed
  
• Events sounds like a bell for a ringing
  telephone

28
Provide sound indications and feedbacks

• When you pick the phone handle, you get an
  indication that the line is clear

29
Provide sound indications and feedbacks

• When you pick the phone handle, you get an
  indication that the line is clear

30
Provide sound indications and feedbacks

• But a clock that ticks it could be an annoyance

31
Use animation to reflect relationship

• Guideline 5
• Use animation to show relationship between
  components, instead of showing the start state
  and then immidiately the end state
  
• For example
• If one object comes out of another object like
  drawers
  
• If one object folds from another object like
  opening CD case

32
Use animation to reflect relationship

• What are the benefits of using animation?
• It makes events look more similar to real world
  behavior
  
• The relationship between the component is more
  obvious Its clear that the drawer is
  contained within the phone and doesnt exist
  independently from the phone

33
Use animation to reflect relationship

• But
• Animation might consume to much of the users
  time
  
• It annoys the skilled user
• Draws the user attention - it might disturb the
  user from concentrating on his work
  
• It might consume a lot of computer resources

34
Extend real world functionality

• Guideline 6
• Computers may provide capabilities that doesnt
  exist in the real world
  
• Add features that provide a better product than
  the real world counterpart

35
Extend real world functionality

• In RealCD you can create a PlayList of your
  favorites songs. In a real CD player, you cannot

36
Extend real world functionality

• In RealPhone there are 10 speed dials like in a
  regular phone
  
• Why not give the user unlimited list of names
  from which he can choose?

37
Provide several functionality levels

• Guideline 7
• Real-World applications should provide several
  views
  
• Basic view for the most frequent operations
• Extended views for advanced features
• The extended view should be provided using
  drawers or changing the basic view appearance

38
Provide several functionality levels

• The basic view
• Is clear and its buttons are easy to find
• Takes less screen space
• Easier for novice users
• The extended view
• Gives power operations to the advanced user
• An application may provide several extended
  views, each groups together operations with same
  logical purpose
  
• The user can choose only the views he need

39
Provide several functionality levels

• The problems
• The user might not be aware of the extended
  options
  
• A real object doesnt have levels
  conflicting with the look like the real thing
  concept

40
Provide several functionality levels

• What will this switch do?

41
Provide several functionality levels

• What will this switch do?

• Maybe the phones at IBM have toggle switches that
  modify the physical size of the phone, but weve
  never seen one

42
Provide several functionality levels

• What happens when the user tries to access
  multiple extended features drawers ?

43
Provide several functionality levels

• What happens when the user tries to access
  multiple extended features drawers ?

• Displaying extended views in drawers makes it
  hard to display more than one at a time

44
Anticipate and assist frequently occurring tasks

• Guideline 8
• Provide shortcuts for tasks that users do
  frequently
  
• Keyboard shortcuts
• One mouse click operations
• Anticipate what the user wants and help him to do
  it more quickly
  
• Auto Complete

45
Anticipate and assist frequently occurring tasks

• Why should shortcuts be provided?
• Helps the skilled user to complete the work more
  quickly
  
• Gives the user the feeling that he is in control
  of the application
  

46
Anticipate and assist frequently occurring tasks

• Guessing the user will might become a nuisance
• When RealPhone accepts an incoming call, it
  becomes the topmost window, but doesnt take the
  keyboard focus
  
• When the user gives it the focus using a mouse
  click, it answers the call automatically
  
• The computer decided that he wanted to answer
  the call

47
Anticipate and assist frequently occurring tasks

• The user might not like this because
• It is not intuitive, the user will be surprised
  that the call is answered
  
• He might inadvertedly click the application
  such things happen in computers, but not in the
  real world
  
• Even after he realizes this behavior, he might
  not like it. The application should let him the
  option to disable this feature
  
• To guess what the user wants, to be intuitive, is
  not an easy task for a software

48
Provide multiple levels of assistance

• Guideline 9
• The application should provide hierarchy of
  helps
  
• Immediate help - Tooltips pointer based help
• How To information Step by step wizard
• Hints and tips tip of the day, clippy
• Full overview - Instruction manual that looks
  like a real manual

49
Provide multiple levels of assistance

• QuickTime 4 did not follow this rule
• It uses some non intuitive controls
• Can you guess what this shirt button does?

50
Provide multiple levels of assistance

• QuickTime 4 did not follow this rule
• It uses some non intuitive controls
• Can you guess what this shirt button does?

51
Provide multiple levels of assistance

• QuickTime 4 doesnt provide tooltips, nor make it
  clear what each control mean
  
• It provides an online help
• Takes more time
• Have to log on to the web
• The help providing site may change from time to
  time, or not be available
  

52
Dont move primary controls automaticly

• Guideline 10
• Dont move the primary controls when the user
  switches between functionality levels
  
• Moving the primary controls will
• Confuse the user
• Make level switching harder
• look unnatural to the user not like in the real
  world
  
• Make it easy for the user to drag the view back
  into the screen when it gets out of it

53
Dont move primary controls automaticly

• What happens when the application is near the
  screen bottom?

54
Dont move primary controls automaticly

• What happens when the application is near the
  screen bottom?

55
Dont move primary controls automaticly

• The user wanted to access the extended features
• Because they are not fully visible, he will have
  to move the window by himself
  
• The application should have made this adjustment
  by itself

56
Dont move primary controls automaticly

• QuickTime 4 handled this problem by its own
  bizzare way
  
• It opens up to the bottom of the screen

57
Dont move primary controls automaticly

• QuickTime 4 handled this problem by its own
  bizzare way
  
• It opens up to the bottom of the screen

58
Controls choosing

• Guideline 11
• Divide controls to 2 categories
• For statefull controls, such as switches, sliders
  and lists, use real looking controls
  
• For stateless controls, such as buttons and text
  fields, use standard UI controls.

Stateful control
Stateless controls
59
Controls choosing

• Why such a distinction is possible?
• Stateful controls do the interaction with the
  user. The user expects a certain behavior that
  the standard counterparts dont provide
  
• Stateless controls are relatively static, doesnt
  change by user touch. Choosing the standard GUI
  controls instead of creating your own is only
  stylistic decision

60
Controls choosing

• What are the benefits of such a distinction?
• For stateful controls
• Make the objects more recognizable
• Make their behavior more predictable
• For stateless controls
• Using standard controls saves develoment time
• Support the systemwide configurations as
• Language support support right to left writing
  direction
  
• Accessability support larger fonts

61
Controls choosing

• Whats wrong with the distinction?
• Inconsistency some controls will look like
  regular application, and some will look unique
  
• Confusing the standard controls dont look like
  objects from the real world
  
• Guideline 2 required the use of natural looking
  controls, but this guideline does not

62
Coexist with other desktop applications

• Guideline 12
• Real-World application should behave like native
  desktop applications for example it should
  provide an options popup window
  
• It should adopt standard interaction with other
  applications like Drag Drop
  
• It should not interfere with other applications

63
Coexist with other desktop applications

• What will the user achieve by that?
• The user can manipulate all the applications in
  the same way
  
• The user can incorporate the new applications
  with the existing ones (Drag Drop)

64
Coexist with other desktop applications

• What is the problem with this rule?
• Breaks the real world metaphor when we touch a
  phone in reality, there isnt any pop up
  
• The user might not expect the application to
  behave like a regular one, and so will miss some
  of the applications features

65
Coexist with other desktop applications

• The RealPhone did not make a clear decision which
  features should look natural and which should
  look like in a standard application
  
• The user cannot close the application in the
  natural way, but only through the popup window
  
• But he can move it in two different ways

66
Coexist with other desktop applications

• QuickTime 4 didnt follow this guideline
• The application didnt take into acount that it
  shares with other applications the same screen
  space
  
• The players default movie window size wastes a
  lot of screen space
  
• Keeping a fixed size of a device is needed only
  in real world

67
More guidelines(taken from Hall of Shame)
68
Follow control behavior rules

• Guideline 13
• Controls, even if are non standard, should behave
  like regular controls
  
• When a control gets the focus, it should be
  marked with dotted line
  
• The control must not contradict with the user
  previous knowledge
  
• When a button is pressed, it should look like it
  is pushed inside and then released

69
Follow control behavior rules

• Why should the controls keep this behavior?
• The user is not surprised
• The user can make use of his previous knowledge
• Easier to develop when rules are strict

70
Follow control behavior rules

• QuickTime 4 buttons dont follow a regular button
  behavior
  
• By default, the buttons are grayed
• Regular GUI uses this color as a convention for
  disabled controls the user might not be aware
  that he can press the buttons
  
• When the button is pressed, the color changes
  the button looks enabled

Default state
Playing state
71
Keep internal consistency

• Guideline 14
• If a new control or feature is used, it should
  be used consistently throughout the whole
  application
  
• Why?
• Learning how to operate a feature will give the
  user the knowledge to operate similar features
  
• The user wont be surprised
• The developer can reuse the new controls

72
Keep internal consistency

• QuickTime 4 didnt follow this guideline
• It presents two controls which look the same
  the speaker and the apple icons
  
• Clicking the speaker icon will mute the sound
• Clicking the apple icon will do nothing
• The user will try to use the apple icon, because
  clicking the speaker icon caused something

73
Follow the user preferences

• Guideline 15
• The Real-World application should follow the
  systemwide preferences of the user
  
• Color scheme - like background color
• Sound scheme - like sound on minimize
• Accessibility options - like enlarged font size
• Regional options - like date and currency

74
Follow the user preferences

• Those preferences should be preserved because
• Users that define private schemes would like that
  all the applications that they use will follow
  those schemes
  
• User might not like the colors that were chosen
  by the Real-World application
  
• Users with disabilities might not be able to use
  the application if the preferences are not
  followed

75
Pros and Consof Real-World design
76
The benefits

• More intuitive
• The user understands how to use the applications
  because he knows it already
  
• The applications components are easily
  identified by their shape and context
  
• Cleaner interface
• Simple to use
• Efficient in screen space consumption

77
The benefits

• Cross platform
• Each OS has its own visual style
• In todays global village concept, uniform
  interface on all platforms is an advantage
  
• Such an interface also cuts the development
  costs, because there is no need to adapt the
  interface to each OS

78
The problems

• Consistency among applications
• A Real-World application by definition is not
  consistent with other applications
  
• The user cannot use his previous knowledge for
  quick leaning of new applications
  
• The problem will increase as more Real-World
  applications appear each one will have its own
  special GUI

79
The problems

• Adopting Physical limitations
• Physical world limitations do not apply to
  computers Why provide 10 speed dials when you
  can provide 1000?
  
• Physical world has limitations like budget and
  implementation that are irrelevant to computers
  a builtin LCD in a VCR remote control might make
  things much easier,but budget reasons prevent it

80
The problems

• Difficult to learn
• The basic assumption of a Real-World application
  is that the user already knows how to operate it
  using previous knowledge
  
• But what if the user doesnt know the real world
  counterpart or all of its features?
  
• Without menus and meaningful controls, the user
  cannot learn the applications options
  
• The user might miss some of the options because
  he will assume that he knows how to operate the
  application, based on his experience

81
What we thought about the articles
82
What we think about the RealThings guidelines

• The good things
• Gave a good introduction to Real-World
  applications subject
  
• Gave examples to every guideline

83
What we think about the RealThings guidelines

• The bad things
• The article didnt consider the donwsides of
  Real-World concept
  
• They were biased towards their design, claiming
  that current GUI has totally failed
  
• The example applications RealPhone and RealCD
  didnt always follow the guidelines
  
• Didnt finish the article We havent gotten to
  that task yet, but if you want to give it a try
  we would love to talk with you

84
What we think about the Hall of shame critics

• The good things
• The articles were interesting and cynical
• They gave a lot of examples
• Made their points clear
• The bad things
• They gave same importance to major and minor
  problems
  
• The authors considered only the negative aspects
  and implied that the products are unusable

85
Resources

• IBM RealThings guidelines
• http//www-3.ibm.com/ibm/easy/eou_ext.nsf/Publish/
  578
  
• IArchitects Hall of Shame
• http//www.iarchitect.com/realcd.htm
• http//www.iarchitect.com/phone.htm
• http//www.iarchitect.com/qtime.htm
• MacKiDo
• http//www.mackido.com/Interface/RealInterfaces.ht
  ml
  
• Mac DevCenter
• http//www.macdevcenter.com/lpt/a/1362