نمذجة واجهات الاستخدا م

1. نمذجة واجهات الاستخدام المحاضرة التاسعة د. محمد أحمد

2. تصميم واجهات الاستخدام البيانيةGUI • إن تصميم واجهات الاستخدام البيانية نشاط متعدد الاختصاصات, فهو يتطلب مهارات متعددة من فريق كامل. • تبدأ إجرائية تصميم واجهات الاستخدام البيانية لتطبيقات نظم المعلومات مع حالات الاستخدام. • يجب إعداد نماذج أولية رسومية حيث لايمكن وصف الواجهات بطريقة سردية. • غالباً المصمم هو السؤول عن تصميم هذه الواجهات وقد يتطلب استشارة خبير تكنولوجي لاستثمار مزايا التقانات الموجودة. • يجب إعداد نماذج أولية لواجهات الاستخدام و تدقيقها مع فنانين وأخصائيين بعلم النفس والسلوك أذا تطلب ذلك بحيث يكون الهدف الحصول على واجهات جذابة و قابلة للاستخدام.

3. Good UI design and usability • Usability and good UI design are closely related. • A bad UI can have unfortunate results...

4. توجيهات عامة لتصميم الواجهات • السيطرة للمستخدم • مبدأ الانسجام • التشخيص والتخصيص • التسامح • التغذية الراجعة • النواحي الجمالية وقابلية الاستخدام

5. “Computer” Facilitator Observer(s) User أهمية الحصول على أراء مختلفة

6. UI design, components • When should we use: • A button? • A check box? • A radio button? • A text field? • A list? • A combo box? • A menu? • A dialog box? • Other..?

7. Apple Mac user interfaces

8. UI Hall of Shame

9. Layout and color

10. Bad error messages

11. UI design - buttons, menus • Use buttons for single independent actions that are relevant to the current screen. • Try to use button text with verb phrases such as "Save" or "Cancel", not generic: "OK", "Yes", "No" • use Mnemonics or Accelerators (Ctrl-S) • Use toolbars for common actions. • Use menus for infrequent actions that may be applicable to many or all screens. • Users hate menus! Try not to rely too much on menus. Provide another way to access the same functionality (toolbar, hotkey, etc)

12. Checkboxes, radio buttons • Use check boxes for on/off switches, when any one switch can be toggled irrespective of the others (often correspond to boolean values). • Use radio buttons for related choices, when only one choice can be activated at a time (often corresponds to enum / constant values).

13. Lists, combo boxes • use text fields (usually with a label) when the user may type in anything they want • use lists when there are many fixed choices (too many for radio buttons to be practical) and you want all choices visible on screen at once • use combo boxes when there are many fixed choices, but you don't want to take up screen real estate by showing them all at once • use a slider or spinner for a numeric value

14. LI BS Y S: Search Choose collection: All Word or phrase: Search by: T itle Adjacent words Y es No OK Default Cancel An example UI • What can we say about this UI dialog? Did the designer choose the right components? • Let's assume there are 20 collections and 3 ways to search (by title, author, relevancy)

15. UI design - multiple screens • use a tabbed pane when there are many screens that the user may want to switch between at any moment • use dialog boxes or option panes to present temporary screens or options

16. Creating a paper prototype • gather materials • paper, pencils/pens • tape, scissors • highlighters, transparencies • identify the screens in your UI • consider use cases, inputs and outputs to user • think about how to get from one screen to next • this will help choose between tabs, dialogs, etc.

17. Application backgrounds • draw the app background (the parts that matter for the prototyping) on its own, then lay the various subscreens on top of it

18. Representing a changing UI • layers of UI can be placed on top of background as user clicks various options

19. Representing interactive widgets • buttons / check boxes: tape • tabs, dialog boxes: index cards • text fields: removable tape • combo boxes: put the choices on a separate piece of paper that pops up when they click • selections: a highlighted piece of tape or transparency • disabled widgets: make a gray version that can sit on top of the normal enabled version • computer beeps: say "beep" (hah!)

20. Example paper prot. screen

21. Example full paper prototype

22. نوافذ الواجهة يتألف أي تطبيق يعمل تحت نظام النوافذ على نوعين من الواجهات: • النافذة الأولية • النوافذ الثانوية

23. النافذة الأولية للنافذة الأولية أطار يضم: • شريط عنوان النافذة • شريط القوائم • أشرطة الأدوات • شريط الحالة • محتويات النافذة القابلة للمعاينة والتعديل • أشرطة التدرج الأفقية والشاقولية في تطبيقات الويب تعتبر صفحة الوب نافذة أولية ونقطة إدخال للتطبيق.

24. النوافذ الثانوية للنوافذ الثانوية صيغ وأشكال مختلفة فقد يكون: • علبة حوار • مجلد بعلامات جدولة • قائمة منسدلة • علبة رسالة

25. الترابط بين النوافذ يجب على مصمم واجهات الاستخدام البيانية مهمة تنظيم الارتباطات بين النوافذ في بيئة منسجمة وسهلة الفهم. • يجب الا يشعر المستخدم أنه تائه بين مجموعة نوافذ مفتوحة أمامه.

26. الوثيقة والمعاينة 1 يعتمد تصميم واجهات الاستخدام البيانية في بيئة مايكروسوفت ويندوز على مكتبة الصفوف المستخدمة لتحقيق أغراض النوافذ وعناصر التحكم المستخدمة فيها, أي على واجهة برمجة التطبيقات, وتدعى هذه المكتبة بِ MFC تتطلب البرمجة في بيئة الويندوز: • إنشاء أغراض من صفوف المكتبة MFC • إنشاء صفوف جديدة خاصة بالتطبيق ترث الوظائف العامة من صفوف المكتبة MFC • قبول بنية محددة للترابط بين النوافذ وتعرف باسم منهج الوثيقة\ المعاينة.

27. الوثيقة والمعاينة 2 الوثيقة وفقاً لمفهوم المكتبة MFC هي مجموعة من معطيات التطبيق التي يستطيع المستخدم أن يتفاعل معها: • تحوي الوثيقة أي نمط من المعطيات وليس نصوصا فقط • يشتق غرض الوثيقة في المكتبة MFC من الصف Cdocument المعاينة (view): عرض جزء من المعطيات المخزنة في الغرض Cdocument على الشاشة وهو مشتق من الصف CView النافذة وحيدة الوثيقة: عندما تتألف واجهة الاستخدام البيانية من نافذة أولية وحيدة تُفتح من خلالها وثيقة واحدة فقط في لحظة محددة. النافذة متعددة الوثائق: يستخدم التطبيق ذو الواجهة متعددة الوثائق نافذة أولية واحدة فقط تدعى النافذة الأب و يسمح هذا التطبيق بفتح عدة وثائق في إطار هذه النافذة كما لو أنها نافذة أولية يمكنها الظهور ضمن النافذة الأب فقط وليس على سطح المكتب.