Date post: | 24-Dec-2015 |
Category: |
Documents |
Upload: | ferdinand-allen |
View: | 217 times |
Download: | 1 times |
INTERACTION DESIGN
JMA 464/564MWF 12:00 – 12:50
College Hall 205
JMA 464/545 - Instructor
• Dr. Bill Gibbs
• Associate Professor in Journalism & Multimedia Arts.
• Ph.D. in Instructional Systems from The Pennsylvania State
University.
• Office 341 College Hall• Office hours – Tues 11:00-2:00, WF 10:30 – 12:00 and by appointment
• Phone – 412 - 396-1310
• E-mail – [email protected]
JMA 464/545 - Purpose
• Introductory course about IxD & HCI
• Overview of IxD, HCI, UX, and usability
• Review IxD, HCI, UX methods and issues
JMA 464/545 – Course goals
• Develop understanding of IxD, human computer-interaction (HCI) and user-centered design & development.
• Develop understanding of UX, user-experience practices.
• Discuss development processes and tools.
JMA 464/545 – Course goals
• Explain methods for IxD research & development.
• Demonstrate general principles underlying effective interaction design and navigation control.
• Use equipment and software to observe interaction.
JMA 464/545 – Applications & Tools
The course focuses on:
1)Interaction/HCI
2)User observation
3)Design & Development based on observation/study.
JMA 464/545 – Applications & Tools
• In class we use a variety of tools to prototype interactions.
JMA 464/545 – Applications & Tools
For observations, we will use:
• Observer XT
• Arrington Research Eye-tracker
• TechSmith – Morae
• Human Factors Facility
BEGIN TO OBSERVE EVERYDAY THINGS……how might you improve them?
What might happen?
What might happen?
Pull hood latch
Proximity
What might happen?
What might happen?
Is the coffee maker on or off?
How do you fix it?
Returns Web-wide results, which confuses users
CNN now implements search in this way.
Mapping. Good or Bad?
A B C D
Is this a better design?
Mapping – direct relationship between the device design and its functionality.
Poor designs?
• Which bottle ?- Insulin
Not sure what these mean? Cadillac car What do you think happens?
Source: http://www.baddesigns.com/
People often take the path of least resistance.
Try to figure out what the least resistant paths are before pouring concrete.
Source: http://www.baddesigns.com/
People often take the path of least resistance. In a similar way, Amazon makes it easy to buy additional items.
People often take the path of least resistance. In a similar way, Amazon makes it easy to buy additional items.
People want information, services, entertainment… Your design should accommodate their needs as efficiently and effectively as possible.
Logical constraint
Physical constraint
Physical constraint
What happens here?
Source: http://www.baddesigns.com/
Physical constraint – not visible
What happens here?
Source: http://www.baddesigns.com/
Sometimes constraint is not visible.
Task: Return movie (DVD) to Redbox
I think… similar to
Task: Return movie (DVD) to Redbox
Ok, drop it in … but
Task: Return movie (DVD) to Redbox
Must press Return A DVD first
What might be a better approach?
Task: Return movie (DVD) to Redbox
Why not a physical constraint instead of this? Return a DVD is activated when inserting DVD.
What might happen here?
Source: http://goodexperience.com/tib/b/product_design/
Labels???
If the switch is pointing to "Off", it's really "On", and vice versa.
Source: http://goodexperience.com/tib/b/product_design/
Labels???
The arrows relate to direction, not the final state of the switch.
The words “ON/OFF” suggest the final state but they are positioned inversely to switch function.
Source: http://goodexperience.com/tib/b/product_design/
Direction, not state of control
Labels???
A simpler design is better.
The switch affords/suggests how to use it.
Additional labels may add confusing information.
How do we design for different devices?• By looking at examples in the physical world, we can
become informed about how to design for:
• Web• Mobile devices• Etc.
We’re use to this…
What about this…
What about this…
What do these controls mean?
And the controls…
Design and use | Questions• How do people use different devices?• What can observing their use tell us about how we should
design and develop?• How do different devices influence behavior?
Design and use | Questions• How do we design for the initial User Experience (UX)?• How do we design for the entire User Experience (UX)?
Observe human-computer interactions
Example 1: Observer Example 2: Observer Example 3: Morae
Example 5: Florida State Example 6: EyeTrackExample 4:Post
Example 7: CNN - EyeTrack Example 8: Student EyeTracks
Example 9: ViewPoint Analysis
JMA 464/545 – Readings
Interaction Design: Beyond Human Computer Interaction by Rogers, Sharp, and Preece. Publisher: John Wiley & Sons; 3rd Edition (2011) ISBN 978-0-470-66576-3
iPhone Apps with HTML, CSS, and JavaScript by Jonathan Stark. Publisher: O’Reilly (2010). Online at http://ofps.oreilly.com/titles/9780596805784/
• Additional readings will be assigned throughout the semester and will include:
• Journals articles
• Web articles
• Book chapters
JMA 464/545 - Assignments1. Practice assignments
2. Interaction design activities
3. Group critique & re-design of device
4. Proficiency tasks: Eye-tracking, Morae, Observer XT (Fisheye)
5. Mini-application design, implementation, evaluation
6. Exam
7. IxD Investigation (Graduate students only)
JMA 464/545– E-mailingE-mailing assignments/attachments.
• Must have your name
• E-mail address
• Title of assignment
• Label subject of e-mail
JMA 464/545
• Class web site: http://www.jma.duq.edu/classes/gibbs/jma464-01/
• Rooms 205 & 345 Access
JMA 464/545 – Before you go…
•Log into computer
DEFINITIONSHCI
Defining the field• …a discipline concerned with the design, evaluation and
implementation of interactive computing systems for human use and with major phenomena surrounding them.
• As defined by the Special Interest Group on Human-Computer Interaction (SIGCHI) of the Association for Computing Machinery (ACM)
Defining the field• Human-Computer Interaction (HCI) is the study and the practice of usability.
• …understanding and creating software and other technologies that people will want to use, will be able to use, and will find effective when used.
John Carroll, 2001
Defining the field• Rough characterization of HCI as a field. It examines:
• joint performance of tasks by humans and machines; • structure of communication between human and machine; • human capabilities to use machines (including the learnability of
interfaces); • algorithms and programming of the interface itself;• engineering concerns that arise in designing and building
interfaces; • process of specification, design, and implementation and
evaluation of interfaces; and design trade-offs.
• HCI has science, engineering, and design aspects.
Overview: topics• Logging on• Our servers• Using FTP• User folder and class folders• File Extensions
User Name and Password• To connect to our servers from within either of our two
labs (205 or 345):• Ctrl-Alt-Delete• Username: YourLastName• PW: Given in class• You will be asked to change your password the first time you login
User Name and Password• 8 characters or more• 1 UPPERCASE character• 1 number• 1 Special character ($, &) – no spaces
Our Server
www.jma.duq.edu• Your private folder• It’s a subfolder of users folder
• www.jma.duq.edu/users/YourLoginName
• Save files (drag and drop files) while in either lab (CH205, CH345)
• You can also FTP to there from home…
How do I access the server?• Access from either CH345 and CH205
• Start >> Computer (Z: Drive)
• \\jma1\users\username
• While in class, feel free to save to the net folder
How do I access the server?
From dorm or home
ftp://www.jma.duq.edu/users/YourLastName
• Example: ftp://www.jma.duq.edu/users/gibbs/
• You will be prompted for your user name and password• Use the same name and password you used to login to
Windows
How do I access the server?
You will be prompted for your user name and password – jma/username
How do I access the server?
• Folders and files display• Transfer (put) files from your computer, • Download (get) files to your computer.
USER FOLDERThe PUB folder
www.jma.duq.edu
Folder
File
File
FileFile
PUB Folder
Folder
Your Space
User folder
Folder
File
File
FileFile
PUB Folder
Folder
Your Space
All files for the
Web must be in PUB
All files for the
Web must be in PUB
User folder
www.jma.duq.edu
How do I access the server?
• Your folder on server has a child folder named pub• Inside that folder you should create a folder for each
course that requires a web site• In this course, create a sub folder named JMA464
The PUB folder
•You might create subfolders, for each course.
Double-click on pub
Right-click on any unused white area
The PUB folder• Create new folder
• Name it your course name
Web URL• The URL to your website(s) depend on how you structured your home
folder• Using earlier example
http://www.jma.duq.edu/users/gibbs/pub/JMA464/FileName.htm
• Assuming your file name is default.htm, or index.htm in the jma464 folder the address would be:
http://www.jma.duq.edu/users/gibbs/pub/jma464/index.htm
FILE EXTENSIONS
File Extensions• Windows-based computers vs. Mac• Index.htm
File Name
File Extension
Turning File Extensions on in Windows
• Start>>Control Panel>>Folder Options>>View>> uncheck Hide Extensions for known file types