User Interface 중소기업진흥공단 전자상거래지원센터

Overview UED(User Experience & Design) –User: neither technology nor art –Experience: The ultimate goal –Design: not just a pretty face HCI(Human Computer Interaction) –Human as an information processor UCD(User Centered Design) –Its Cost-Benefit UT(Usability Testing) –Direct feedback from users –Most valuable data

User-Centered Design UCD: a method for designing ease of use into the total user experience with products –How should the product be designed? –Key: understanding the users Their environment, their goals and tasks necessary to achieve these goals, their skills, and their ability

Cost-Benefit of UCD(1) Long-term Savings in Development Costs –Post-release maintenance 80% of software life cycle cost –80% due to unmet or unforeseen user requirements(Mayhew and Bias, 1994) –Solving and catching usability problems early Costs conservatively one fourth of the above

Cost-Benefit of UCD(2) Reduced Customer Care Costs –Example: Yahoo! Classified (1998) Most Frequently Asked Questions –How do I post an ad? –How do I edit/delete my ad? Log data alone doesn ’ t help Through User testing –The problems were located By moving such functionalities –Increase ads and decrease calls –In most cases, the design challenge is more complex

Example: Yahoo! Classified

Cost-Benefit of UCD(3) Improved Achievement of Business Objectives –Example: Yahoo Shopping( ) –Through several field studies, better understands How users shop How their behavioral patterns relate to the online shopping experience –After reflected the studies ’ results into the site Forrester Research: Y! shopping as having the most valuable shopping audience on the web Consumer Reports Online: the only site to receive a satisfactory score

Example: Yahoo! Shopping One product image Search results has no images Mom-and-pop merchants Fast download Product image (experience) Brand awareness (trust) Brand name merchants Directory to the left

Cost-Benefit of UCD(4) Increased Efficiency and Productivity –Increased user productivity and decreased user errors Help an organization stabilize and lower costs Decreased training, support, service, product documentation, and personnel costs

Visual Attention The fixations for the first 5 seconds P 1P 2

My Yahoo My Yahoo is a personalization service –Information –Layout –Color or theme Usability testing showed –Users did not recognize it as a personalization service at a first glance –Users had hard time to find the proper functions for the given tasks

My Yahoo Guest Page

Auto Many participants did not notice the seemingly prominent links at the top of a car info page (section with the yellow background). (e.g., P01, P02, P06) There is something about the links on the right that makes many users not notice them. –'How do I choose those (options that I want)?' (P02) –'I'm not quite seeing the choices or options that this truck gives.' (P06) Recommendation: Make the links in the yellow box more noticeable to users.

Failure to notice links in yellow box to the right of the car photo Car information (detail) page (the box color was distorted by the screen capture; is actually yellow)

Usability Testing Room(1) Monitor PC TV VCR Camcorder PC  Camera Monitor Distributor Scan Converter Video Mixer Audio Mixer Observer Participant Experimenter Assistant Microphone One-Way Mirror 

Usability Testing Room(2)