Transcript مهندسی نرم افزار 1

User Interface Design
‫بشرا رجائی‬
[email protected]
[email protected]
Human Computer Interaction (HCI)
 Human Computer Interaction (HCI) is a
multidisciplinary area concerned with the design,
evaluation, and application of usable, effective,
and enjoyable technologies. It adopts a user
centered (or human-centered) approach to
technologies that takes their interactive character
seriously.
‫‪Mental Models‬‬
‫‪ ‬انسانها از نحوه عملکرد و به کارگیری تکنولوژیها مدلهایی در ذهن‬
‫خود ایجاد می کنند‪ .‬مانند‪:‬‬
‫‪ ‬چگونه خودرو شروع به حرکت می کند؟‬
‫‪ ‬یک دستگاه ‪ ATM‬چگونه کار می کند؟‬
‫‪ ‬یک سیستم کامپیوتری چگونه بوت می شود؟‬
‫‪ ‬از جمله مزایای ایجاد این مدلها می توان به توانایی پیش بینی‬
‫رویدادهای مشابه در آینده و همچنین استفاده از ظرفیت های ذهنی‬
‫جهت یادگیری امور جدید نام برد‪.‬‬
‫‪Norman’s Action Cycle‬‬
‫‪ ‬اعمال انسانها دو جنبه دارد‪:‬‬
‫‪ ‬اجرا‪ :‬انجام کاری‬
‫‪ ‬ارزیابی‪ :‬مقایسه آنچه اتفاق افتاد با آنچه مورد نظر بوده است‪.‬‬
Norman’s Action Cycle
Norman Gulfs
‫‪Direct Manipulation‬‬
‫‪ ‬دستکاری مستقیم به معنای ایجاد احساس تاثیر مستقیم در محیط در‬
‫کاربران است به نحوی کع آنها احساس کنند با اشیایی از دنیای واقعی‬
‫کار می کنند نه مدلهای انتزاعی‪.‬‬
‫‪ ‬مفاهیم اصلی در دستکاری مستقیم‪:‬‬
‫‪ ‬اعمال سریع‪ ،‬برگشت پذیر و تدریجی‬
‫‪ ‬دستکاری با ‪ pointing‬و ‪moving‬‬
‫‪ ‬نمایش سریع و پیوسته نتایج‬
‫‪What you see is what you get (WYSIWYG) ‬‬
‫‪Metaphors‬‬
‫‪ ‬دستکاری مستقیم تقریبا ً همیشه برپایه ‪ metaphor‬ها قرار دارد‪.‬‬
‫‪ :Metaphor ‬استفاده از اطالعات و تجربیات افراد در مورد اشیا‬
‫شناخته شده و رویدادهای همزمان جهت بیان اعمال و اشیا انتزاعی‬
‫کامپیوتری‬
‫‪Mental Process‬‬
‫‪ ‬خودآگاه‬
‫‪ ‬گام به گام‪ ،‬کند‪ ،‬زمانبر و با تالش زیاد‬
‫‪ ‬ناخودآگاه‬
‫‪ ‬سریع و بدون نیاز به تالش زیاد‬
‫‪ ‬فواصل ‪ Norman‬را کوتاه می کند‬
‫‪ ‬اجرای سریعتر در شرایط وجود سیستمهای دستکاری مستقیم‬
‫‪Action Identification Theory‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫هر فرد در مواجه با یک عمل خاص می تواند در سطوح مختلف‬
‫انتزاع فکر کند‬
‫از سطوح پایین نحوه انجام یک کار تا سطوح باالتر دلیل و تاثیر‬
‫انجام آن‬
‫هدف در این بحث ایجاد شرایطی جهت غلبه شناخت سطح باالتر‬
‫است‪.‬‬
‫‪What to do vs. How to do‬‬
‫مثال‪ :‬استفاده از تلفن‬
‫‪ ‬عمل سطح باال‪ :‬صحبت با کسی‬
‫‪ ‬عمل سطح پایین‪ :‬فشردن دکمه های تلفن‬
‫‪ ‬اصل اول‪:‬‬
‫‪ ‬اگر کسی را ببینید که از تلفن استفاده می کند‪ ،‬متوجه می شوید که می‬
‫خواهد با کسی صحبت کند نه اینکه دکمه ها را فشار دهد‪.‬‬
‫‪ ‬اصل دوم‪:‬‬
‫‪ ‬وقتی خودتان از تلفن استفاده می کند در مرکز توجه شما صحبتهایی‬
‫است که انجام خواهید داد نه فشردن دکمه ها‬
‫‪ ‬اصل سوم‪:‬‬
‫‪ ‬اگر با یک تلفن عجیب با دکمه های متفاوت و زیاد مواجه شوید‪ ،‬نحوه‬
‫استفاده از تلفن در مرکز توجه قرار خواهد گرفت‪.‬‬
‫اصول طراحی واسط کاربر‬
‫‪ ‬شناخت کاربر‬
‫‪ ‬واسط باید بر اساس اصطالحات و مفاهیم محیط کاربر طراحی شود‪ ،‬نه‬
‫اصطالحات کامپیوتری‪ .‬بعنوان مثال در یک سیستم اداری باید از‬
‫اصطالحاتی چون نامه ها‪ ،‬مستندات‪ ،‬پوشه ها و غیره به جای پیامها‪،‬‬
‫فایلها و دایرکتوریها استفاده کرد‪.‬‬
‫‪ ‬سازگاری و حداقل تعجب‬
‫‪ ‬اعمال قابل مقایسه باید به روش یکسانی انجام شود‪ .‬بعنوان مثال استفاده‬
‫از ”‪ “Ctrl+tab‬و ”‪.“Alt+tab‬‬
‫‪ ‬قابلیت ترمیم‬
‫‪ ‬سیستم باید در برابر خطاهای کاربر مقاوم بوده و به کاربر امکان‬
‫اصالح خطاها را بدهد‪ .‬مانند قابلیت ‪ ،Undo‬تایید مجدد اعمال مخرب‪،‬‬
‫‪ soft delete‬و غیره‬
‫اصول طراحی واسط کاربر‬
‫‪ ‬راهنمای کاربر‬
‫‪ ‬مانند بازخورد معنادار در زمان بروز خطا‪ ،help online ،‬راهنمای‬
‫کاربر‬
‫‪ ‬تنوع کاربر‬
‫‪ ‬واسط باید انواع کاربران از نظر نوع تعامل با سیستم و مشکالت‬
‫فیزیکی احتمالی را در نظر گرفته و امکانات مناسبی برای هر گروه‬
‫ارائه دهد‪.‬‬
System-oriented err or message
?
OK
User-oriented err or message
Error #27
Patient J . Bates is not registered
Invalid patient id entered
Clic kon P atientsf or a listof registeredpati ents
Click on Retry to re-input a pati ent name
Click on Help for more i nformation
Cancel
Patients
Help
Retr y
Cancel
‫تعامل کاربر‬
Interaction
style
Direct
manipulation
Main advantages
Main disadvantages
Fast and intuitive
interaction
Easy to learn
May be hard to
Video games
implement
Only suitable where there
is a visual metaphor for
tasks and objects
Menu selection
Avoids user error
Slow for experienced
Little typing required users
Can become complex if
many menu options
Simple data entry
Takes up a lot of screen
Easy to learn
space
Most general-purpose
systems
Command
language
Powerful and flexible Hard to learn
Poor error management
Operating systems
Natural
language
Accessible to casual
users
Easily extended
WWW information
retrieval systems
Form fill-in
Requires more typing
Natural language
understanding systems
are unreliable
Application examples
Stock control, Personal
loan processing
‫نمایش اطالعات‬
Information to
be displayed
Presentation
software
Display
‫فاکتورهای مهم در نمایش اطالعات‬
 Is the user interested in precise information or




data relationships?
How quickly do information values change?
Must the change be indicated immediately?
Must the user take some action in response to
a change?
Is there a direct manipulation interface?
Is the information textual or numeric? Are relative values
important?
‫مثالی از نمایش ترکیبی‬
Jan
2842
Feb
Mar
2851 3164
April
2789
May
1273
June
2835
May
June
4000
3000
2000
1000
0
Jan
Feb
Mar
April
‫چند مثال از اطالعاتی که تغییرات زیادی دارند‬
1
4
0
2
10
3
Dial with needle
Pie chart
Thermometer
Horizontal bar
20
‫مثالی از نحوه نمایش مقادیر نسبی اطالعات‬
‫‪Temper atu re‬‬
‫‪100‬‬
‫‪75‬‬
‫‪50‬‬
‫‪Pressure‬‬
‫‪25‬‬
‫‪0‬‬
‫‪400‬‬
‫‪300‬‬
‫‪200‬‬
‫‪100‬‬
‫‪0‬‬
‫نکات مهم در استفاده از رنگ در واسط‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫استفاده از تعداد رنگهای محدود‬
‫تغییر حالت سیستم را با رنگ نشان دهید‪.‬‬
‫برای پشتیبانی از وظیفه ای که کاربران انجام می دهند از کدگذاری‬
‫رنگ استفاده کنید‪.‬‬
‫کدگذاری رنگ باید سازگار باشد‪.‬‬
‫در ترکیب رنگها دقت داشته باشید‪.‬‬
‫تکنیکهای ارزیابی واسط کاربر‬
 Questionnaires for user feedback
 Video recording of system use and subsequent tape
evaluation.
 Instrumentation of code to collect information
about facility use and user errors.