Transcript Slide 1

IELM 231: IT for Logistics and Manufacturing
Course Agenda
Introduction
IT applications design: Human-Computer Interface
Fundamental IT tools: sorting, searching
The Client-Server architecture, Interacting applications
IT in logistics, Case study 1: web-based auctions
How auctions work
Web issues: session tracking
Web issues: secure communications
Web issues: cash transactions
IT in logistics, Case study 2: web-search
Search robots
Data processing, Data storage/retrieval (DB, indexes)
Data presentation: page ranking techniques
Examples of Industrial IT applications
Enterprise Resource Planning (ERP):
Demand forecasting (uses statistics)
Inventory tracking (uses: Database)
Materials requirement planning
Operations scheduling
Accounting
Personnel data management (employees, salary/benefits, leave data, ..)
Communications:
Asynchronous (email, messaging)
Synchronous (ICQ, VoIP, …)
Dissemination (Internet, Intranet, Web-search, …)
eCommerce:
Auctions, Online retail, …
Banking, Services, …
…
Basics of IT applications
Stand-alone application: computer program [input  do something  output]
Complex applications: Many interacting computer programs
Fundamental component:
IT applications take inputs (from sensors, humans)
Most IT applications provide outputs (to actuators, humans)
 A “Good” design of the User-Computer Interface is important !
Human Computer Interface (HCI) Design
A “Good” design of the User-Computer Interface is important !
How do we know what is a “good HCI” ?
Usability Evaluation:
Principal component analysis
time-motion study
factor analysis …
Design 
Test with real/typical users 
Analyze [time for operation, subjective feedback, …] 
Guidelines for what is ‘good’ and rules to identify what is ‘bad’
HCI Design: Nielsen’s heuristics.
1. Visible System Status
- For any activity expected to take over 3-5sec, give status feedback to user
MS Windows: search
No estimate of time
IE: download
Better feedback
- For each action, system should respond in some way; e.g. in a web form,
clicking a submit button  button changes color, or a clicking sound is made
[One way to do so is to use DHTML in forms instead of HTML]
HCI Design: Nielsen’s heuristics..
2. Messages must match real world, not program objects
Example:
ATM machine message when trying to withdraw some money:
Poor:
User does not care what is X.25
What is the ‘Local limit’ ?
Better:
Tells user what they can do;
Blocks out restricted actions
HCI Design: Nielsen’s heuristics…
3. User control and freedom
- For choice made by error, provide a ‘way back’ [e.g. undo, redo], or
a method to re-start [e.g. Home button on website]
undo, redo
link to home
where you are
HCI Design: Nielsen’s heuristics….
4. Use Consistent (or better, Standard) terminology and icons
- Do not use multiple words/names for same function in different places
- Consistent terminology in prompts, menus, and user-guides
- Use icons/images without ambiguous meanings
- Consistent color, layout, capitalization, and fonts throughout the application
MS Internet explorer:
Search in page, or Print Preview?
US road signs:
Which one is for “curvy road ahead?
HCI Design: Nielsen’s heuristics…..
5. Eliminate potential errors
Avoid possibility for user to make errors
No calendar !
HCI Design: Nielsen’s heuristics……
6. Recognition is better than recall
- show the choices made by user at an earlier stage, instead of having
to remember earlier actions
Example: NikeID
Previous choices
What remains?
HCI Design: Nielsen’s heuristics…….
7. Flexibility and efficient use
For novice users, provide easy (though longer) interactions),
For advanced/frequent users, provide: short-cut, special keys, macros, …
Example: Special keys
Example: shortcut
ALT+e
ALT+e+t
HCI Design: Nielsen’s heuristics……..
8. Help the user to recognize, diagnose, and recover from error
Error messages should be expressed in plain language (no codes),
precisely indicate the problem, and constructively suggest a solution.
Poor design examples:
HCI Design: Nielsen’s heuristics………
9. Help and Documentation
- Must provide help/manual/user-guide
- Language and format of User-guide should use simple, standard terminology
MS Help: (Good design)
- standardized format; provides search; book-metaphor; use of links
HCI Design: Nielsen’s heuristics
10. Aesthetics and minimalist design
- Do not put too much, irrelevant information in Dialog boxes
- Use standard and commonly accepted controls (sliders, buttons etc.)
- Select fonts/sizes that are suited for screen display to maximize readability
Fonts designed for web use (readable on-screen in large/small font size):
This is an example of Verdana and smaller
This is an example of Georgia
Others: Arial, Comic Sans MS, Adobe Minion web (Internet Explorer default)
How to ensure your font is used on client? Cascading Style Sheets (XML)
Gerhardt-Powals Heuristics.
1. Automate unwanted workload
- Eliminate mental calculations, estimations, and unnecessary thinking
Example:
Travel agent website:
Destination selection: Selection list
Departure date:
- allows proper dates only;
- linked to a calendar tool
[image source: www.cxholidays.com]
Gerhardt-Powals Heuristics..
2. Reduce uncertainty by clear and obvious display of data
Poor design:
Better design:
Gerhardt-Powals Heuristics…
3. Reduce cognitive load by combining lower-level data into
a higher-level summation
4. Group data in consistently meaningful ways to
decrease search time
Example: setting options in Powerpoint™
Gerhardt-Powals Heuristics….
5. Use names that are conceptually related to function
- Terminology should be easy to recall/recognize
- Terminology should be context dependent
Example: Tool (or functions) provided by Adobe Photoshop
Gerhardt-Powals Heuristics…..
6. Present data in a way to ease processing time
- do not require user to perform combinations, addition, subtraction etc.
- use colors*/graphical outputs for easy visualization
*Special caution: design to accommodate color-blind users
Colors of rainbow
Don’t use only color to present choices
Use combination of Color, Images (icons), Words
How the colors of rainbow appear to people
with different types of color-blindness
Gerhardt-Powals Heuristics……
7. Include only the information a user needs at a given time
- Do not distract user with non-essential data
Bad design !!
Summary
What you have learnt:
- Success/Failure of IT systems may depend on User-Interface they provide
- Principles of good user-interface design
- How to identify poor interface design
- How to to improve poor designs by application of Nielsen or
Gerhardt-Powals heuristics
Useful technologies in design of good GUI’s:
Active: programming languages like VB, VC++, Javascript
Passive: HTML, XML, DHTML, Cascading Style Sheets, …
References and Further Reading
This book is available online via the library:
Jeff Johnson, Web bloopers: 60 common web design mistakes, Academic Press
Web sources:
1. Bruce Tognazzini’s Principles of interactive design
2. NASA Usability web-site (great resource!)
3. Bonnie Skaalid’s guidelines
4. Discussion of Nielsen and Gerhardt-Powals heuristics in HFI
Next: Common tools used in applications – sort, search