HCI project--iNews Introduction (Yao Jie) Usage Scenario (Yao Jie) Design Evolution (Yao Jie)...

33
HCI project--iNews Introduction (Yao Jie) Usage Scenario (Yao Jie) Design Evolution (Yao Jie) Summary of Evaluation (Jianfeng Yin) Modification (Jianfeng Yin) Conclusion (Jianfeng Yin)

Transcript of HCI project--iNews Introduction (Yao Jie) Usage Scenario (Yao Jie) Design Evolution (Yao Jie)...

Page 1: HCI project--iNews Introduction (Yao Jie) Usage Scenario (Yao Jie) Design Evolution (Yao Jie) Summary of Evaluation (Jianfeng Yin) Modification (Jianfeng.

HCI project--iNews

Introduction (Yao Jie)Usage Scenario (Yao Jie)Design Evolution (Yao Jie)Summary of Evaluation (Jianfeng Yin)Modification (Jianfeng Yin)Conclusion (Jianfeng Yin)

Page 2: HCI project--iNews Introduction (Yao Jie) Usage Scenario (Yao Jie) Design Evolution (Yao Jie) Summary of Evaluation (Jianfeng Yin) Modification (Jianfeng.

Introduction

Old SystemiNewsUser Population

Page 3: HCI project--iNews Introduction (Yao Jie) Usage Scenario (Yao Jie) Design Evolution (Yao Jie) Summary of Evaluation (Jianfeng Yin) Modification (Jianfeng.

Questions

What is iNews?

What’s its purpose?

Page 4: HCI project--iNews Introduction (Yao Jie) Usage Scenario (Yao Jie) Design Evolution (Yao Jie) Summary of Evaluation (Jianfeng Yin) Modification (Jianfeng.

Old System

• Network traffic• Overwhelming hyperlinks and message• Limited custom choices• On-line

Page 5: HCI project--iNews Introduction (Yao Jie) Usage Scenario (Yao Jie) Design Evolution (Yao Jie) Summary of Evaluation (Jianfeng Yin) Modification (Jianfeng.

iNews

• collect daily news according to users’ interests

• automatic and periodical• no network problem• off-line Application• easy extension to other area other than

news

Page 6: HCI project--iNews Introduction (Yao Jie) Usage Scenario (Yao Jie) Design Evolution (Yao Jie) Summary of Evaluation (Jianfeng Yin) Modification (Jianfeng.

User population

Who’s the user of iNews?

Those people who need the most up-do-date news on the web

Page 7: HCI project--iNews Introduction (Yao Jie) Usage Scenario (Yao Jie) Design Evolution (Yao Jie) Summary of Evaluation (Jianfeng Yin) Modification (Jianfeng.

Scenario

In the morning, you open your computer…

Page 8: HCI project--iNews Introduction (Yao Jie) Usage Scenario (Yao Jie) Design Evolution (Yao Jie) Summary of Evaluation (Jianfeng Yin) Modification (Jianfeng.

Scenario

Page 9: HCI project--iNews Introduction (Yao Jie) Usage Scenario (Yao Jie) Design Evolution (Yao Jie) Summary of Evaluation (Jianfeng Yin) Modification (Jianfeng.

Scenario

Page 10: HCI project--iNews Introduction (Yao Jie) Usage Scenario (Yao Jie) Design Evolution (Yao Jie) Summary of Evaluation (Jianfeng Yin) Modification (Jianfeng.

Scenario

Page 11: HCI project--iNews Introduction (Yao Jie) Usage Scenario (Yao Jie) Design Evolution (Yao Jie) Summary of Evaluation (Jianfeng Yin) Modification (Jianfeng.

Scenario

Page 12: HCI project--iNews Introduction (Yao Jie) Usage Scenario (Yao Jie) Design Evolution (Yao Jie) Summary of Evaluation (Jianfeng Yin) Modification (Jianfeng.

Design evolution

3 iterations

Evaluation stage

Page 13: HCI project--iNews Introduction (Yao Jie) Usage Scenario (Yao Jie) Design Evolution (Yao Jie) Summary of Evaluation (Jianfeng Yin) Modification (Jianfeng.

Iteration 1--first mock-up

Page 14: HCI project--iNews Introduction (Yao Jie) Usage Scenario (Yao Jie) Design Evolution (Yao Jie) Summary of Evaluation (Jianfeng Yin) Modification (Jianfeng.

Feedback for iteration 1

• Too many buttons on the welcoming screen

• “delete news” function is redundant• “edit” function is not necessary

Page 15: HCI project--iNews Introduction (Yao Jie) Usage Scenario (Yao Jie) Design Evolution (Yao Jie) Summary of Evaluation (Jianfeng Yin) Modification (Jianfeng.

Iteration 2—HTML prototype

Improvements:• Remove redundant buttons on the

welcoming screen• Remove “delete news” and “edit news”

function• Add news list

Page 16: HCI project--iNews Introduction (Yao Jie) Usage Scenario (Yao Jie) Design Evolution (Yao Jie) Summary of Evaluation (Jianfeng Yin) Modification (Jianfeng.

Prototype II—welcoming screen

Page 17: HCI project--iNews Introduction (Yao Jie) Usage Scenario (Yao Jie) Design Evolution (Yao Jie) Summary of Evaluation (Jianfeng Yin) Modification (Jianfeng.

Prototype II—main screen

Page 18: HCI project--iNews Introduction (Yao Jie) Usage Scenario (Yao Jie) Design Evolution (Yao Jie) Summary of Evaluation (Jianfeng Yin) Modification (Jianfeng.

Feedback for iteration 2

• The position of the row of buttons below the news story

• News source• News list• Default category and news

Page 19: HCI project--iNews Introduction (Yao Jie) Usage Scenario (Yao Jie) Design Evolution (Yao Jie) Summary of Evaluation (Jianfeng Yin) Modification (Jianfeng.

Iteration 3

Improvements:• Main screen: change the position of the

buttons below the news story• Added a new feature, through which a

user can choose his own favorite websites. • Removed the detailed news list in the

directory tree. • Provided the users with a default news

category and news.

Page 20: HCI project--iNews Introduction (Yao Jie) Usage Scenario (Yao Jie) Design Evolution (Yao Jie) Summary of Evaluation (Jianfeng Yin) Modification (Jianfeng.

Prototype III—welcoming screen

Page 21: HCI project--iNews Introduction (Yao Jie) Usage Scenario (Yao Jie) Design Evolution (Yao Jie) Summary of Evaluation (Jianfeng Yin) Modification (Jianfeng.

Prototype III—main screen

Page 22: HCI project--iNews Introduction (Yao Jie) Usage Scenario (Yao Jie) Design Evolution (Yao Jie) Summary of Evaluation (Jianfeng Yin) Modification (Jianfeng.

Summary of the Evaluation

strength: windows based directory constant visibility of system status

weakness: mainly implementation problems, e.g. active

folder conceptual model, e.g. exit, websites

Page 23: HCI project--iNews Introduction (Yao Jie) Usage Scenario (Yao Jie) Design Evolution (Yao Jie) Summary of Evaluation (Jianfeng Yin) Modification (Jianfeng.

Main Modifications

rearrange the control buttonsdelete “forward” and “websites” buttonsadd a “preference” button for user

customizationadd a “help” buttongive options for “save” and “print”

Page 24: HCI project--iNews Introduction (Yao Jie) Usage Scenario (Yao Jie) Design Evolution (Yao Jie) Summary of Evaluation (Jianfeng Yin) Modification (Jianfeng.

Main Screen

Page 25: HCI project--iNews Introduction (Yao Jie) Usage Scenario (Yao Jie) Design Evolution (Yao Jie) Summary of Evaluation (Jianfeng Yin) Modification (Jianfeng.

Save News

Page 26: HCI project--iNews Introduction (Yao Jie) Usage Scenario (Yao Jie) Design Evolution (Yao Jie) Summary of Evaluation (Jianfeng Yin) Modification (Jianfeng.

Delete News

Page 27: HCI project--iNews Introduction (Yao Jie) Usage Scenario (Yao Jie) Design Evolution (Yao Jie) Summary of Evaluation (Jianfeng Yin) Modification (Jianfeng.

Websites

Page 28: HCI project--iNews Introduction (Yao Jie) Usage Scenario (Yao Jie) Design Evolution (Yao Jie) Summary of Evaluation (Jianfeng Yin) Modification (Jianfeng.

Save and Print

when do “save” and “print”, users can choose what news to save or print now

Page 29: HCI project--iNews Introduction (Yao Jie) Usage Scenario (Yao Jie) Design Evolution (Yao Jie) Summary of Evaluation (Jianfeng Yin) Modification (Jianfeng.

Active folder

highlight the active folder

no need for “delete” dialogue, i.e. the active folder will be delete

Page 30: HCI project--iNews Introduction (Yao Jie) Usage Scenario (Yao Jie) Design Evolution (Yao Jie) Summary of Evaluation (Jianfeng Yin) Modification (Jianfeng.

Add category

add a category under the active folder

interactive user input

Page 31: HCI project--iNews Introduction (Yao Jie) Usage Scenario (Yao Jie) Design Evolution (Yao Jie) Summary of Evaluation (Jianfeng Yin) Modification (Jianfeng.

Remind time

users can define remind time interactively now

add a “cancel” button

Page 32: HCI project--iNews Introduction (Yao Jie) Usage Scenario (Yao Jie) Design Evolution (Yao Jie) Summary of Evaluation (Jianfeng Yin) Modification (Jianfeng.

Prompt for empty folders

A prompt message will pop out, when a folder contains no news

Page 33: HCI project--iNews Introduction (Yao Jie) Usage Scenario (Yao Jie) Design Evolution (Yao Jie) Summary of Evaluation (Jianfeng Yin) Modification (Jianfeng.

Conclusion

a personal news agent interface was developed

HCI issues considered and applied: Visibility, Feedback, Match between system

and the real world, Recognition rather than recall, help and document, etc.

Further extension, e.g. academic paper search