Creating User Interfaces

1
Creating User Interfaces

• Flash viewer input, bouncing images
• Cookies and SharedObject
• Fitts's Law
• State of skills, expectations
• Questions?
• Homework Complete XML-based application

2
Bouncing images example

• Demonstrate example on my web page
• Read tutorial for details
• Features
• Use of attributes and 'irregular' xml
• Viewer input
• Number labels
• Adding to the display list
• Whole object is animated
• What I don't like about
• application
• implementation

3
XML attributes

• Data can be attributes, that is, named values in
  a node header. Think of html
• lta href"details.html" gt
• ltimg name"cn" src"head.jpg" size"200"/gt
• When should something be an attribute versus a
  all text subnode?
• Up to the people defining the XML!

4
XML

• Previous examples had all nodes the same
  structure.
• In this example, some item nodes have extra
  subnodes
• Note JavaScript and ActionScript have methods
  for determining the names and structure of XML
  even if nothing is known.

5

• lt?xml version"1.0" encoding"utf-8"?gt
• ltalbumgt
• ltitem xspeed"3" yspeed"8"gt
• ltpicnamegtigor.jpglt/picnamegt
• lttitlegtBiggest Obama supporterlt/titlegt
• lt/itemgt
• ltitem xspeed"-1" yspeed"2"gt
• ltpicnamegtquiltfolks.jpglt/picnamegt
• lttitlegtPiecemakers for changelt/titlegt
• ltcommentgtWomen who made a quilt as a fund
  raiser for Obamalt/commentgt
• lt/itemgt

6

• ltitem xspeed"-3"gt
• ltpicnamegtquilt23.jpglt/picnamegt
• lttitlegtFinished Obama quiltlt/titlegt
• lt/itemgt
• ltitem xspeed"2" yspeed"4"gt
• ltpicnamegtobamashirt.jpg lt/picnamegt
• lttitlegtChicago Store Window lt/titlegt
• lt/itemgt
• ltitem yspeed"5"gt
• ltpicnamegtgoinghome.jpglt/picnamegt
• lttitlegtComing home from Grant Park lt/titlegt
• ltexplaingtAllison and Liam on the Chicago
  ELlt/explaingt
• lt/itemgt
• lt/albumgt

7
ActionScript xml attributes

• .attribute(name) produces the attribute value if
  it exists, null otherwise.
• For each (var propXML in myXML.item)
• xs Number(prop.attribute("xspeed"))
• Note Number converts String to numbers. It is
  necessary! Number interprets null as zero, which
  is appropriate here. Otherwise, you might use
• if (prop.attribute("xspeed")) do something
• else do what is needed if attribute missing

8
ActionScript xml

• NOTE terminology can vary. I and others use
  subnode but it also can be property
• if (prop.hasOwnProperty("comment"))

9
User/viewer/player input

• Use Window/Components TextInput
• Properties Parameters set initial text
• Properties give component a name (albumname)
• Appropriate event isalbumname.addEventListener(Co
  mponentEvent.ENTER,getalbumname)
• NOT the CHANGE event. This is triggered at each
  keystroke

10
Number Labels

• I realized that the title and extra information
  wasn't linked to the bouncing images so I
  generated a number
• Class definitions specify variables for each
  object of the class AND variables for the whole
  class.
• Movingsnapshot class hasinternal static var
  counterint 0

11
Number labels, cont.

• Initial mistake doing the addChild for the label
  before the image was loaded. This put the number
  underneath the picture.
• No problem making the number label and picture
  move together. They are all part of the
  Movingsnapshot object.

12
Cookie

• Small amount of data stored by a program on the
  client computer
• Common use is passwords, personal preferences,??
• Flash provides SharedObject. More general.
• User can disable cookies and SharedObject.
• Check out tutorials for more detail

13
Cookie

• Stored as name-of-cookievalue pair
• usernameJeanine
• Plus (each optional), separated by
• expiration time as GMTexpiresThu, 19 Feb 2009
  123000 UTCif absent, expires when browser
  closed
• domainpurchase.edu Broaden access to cookie.
  If absent, the current domain
• path"/" Can broaden or make more restrictive.
  If absent, current path.

14
SharedObject

• Get stored shared object or create a new one
• var my_soSharedObject SharedObject.getLocal("r
  esults")
• Set and save
• if (my_so.data.resultsnull) //very first time
• results_array new Array(0,0,0,0)
• my_so.data.resultsresults_array
• my_so.flush(100)
• //need is 4 4 bytes space for a header for
  the array.
• // assume this is under 100 bytes
• else
• results_array my_so.data.results
• // flush automatically when application ends
• Ways to set domain, expiration time and path.

15
Fitts's Law

• Time to get to a place on the screen is dependent
  on the distance and the precision required.
• Confirmed by actual testing!
• T k log2(D/S 0.5), k 100 msec.
• T time to move the hand to a target D
  distance between hand and target S size of
  target
• http//www.usabilityfirst.com/glossary/term_265.tx
  l
• http//ei.cs.vt.edu/cs5724/g1/glance.html

16
Group exercise

• http//www.asktog.com/columns/022DesignedToGiveFit
  ts.html

17
Cautionary note

• Skills at using screen, mouse, touch pad, etc.
  changing, evolving
• Skill at typing (regular) text is.degrading?
• Discuss
• BUT all skills can improve. For example, you can
  learn how to type better/fast using predictive
  text.

18
Also expectations / experiences

• What users bring to your application is
  important
• Experiences with other (existing) platforms and
  applications
• Expectations on what your thing will be
• For example, this should take one mouse click
  versus
• I need to enter considerable amount of complex
  data. The process can and should be deliberate,
  much feedback.

19
Homework

• Complete XML based Flash or JavaScript
  application.
• Prepare presentation/demonstration.
• Prepare 1-pager abstract summarizing what your
  application does. Screen shot.
• ONE (1) PAGE.