SlideShare una empresa de Scribd logo
1 de 17
Effective Interface Design By Avoiding Cognitive Overload – Addressing issues with Visual Design  Abdullah ALRASHIDI  EDGE903 - 2011
Content:
[object Object],[object Object],[object Object],[object Object]
•  Graphical User Interface (GUI) – is the user visual interface that allow users to interacting with a computer using items such as windows and icons (Norman 2004).  •  Design considerations principles:  organize, economize and communicate. It should take into account human factors and cognitive ability.
•  Organize – consistency, screen layout, relationships and navigability are important concepts  •  Consistency – match with the real world – what users are used to. •  Screen layout – the general 7+/-2 rule is essential to considered to avoid information overload. Designing visual representation can designed according to CLT to avoid overload  •  CLT to properly design learning materials  avoid cognitive overload
If Attended to LONG-TERM MEMORY ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Stimuli in the Environment  SENSORY MEMORY  Elaborative  Rehearsal Sweller, et al.,1998 Cognitive Architecture & Instructional Design  WORKING MEMORY  If toattended
[object Object],[object Object],[object Object],[object Object],LEARNING
CLT: 3 types of CL ,[object Object],[object Object],[object Object],Intrinsic Load (Irreducible by instructional design) Extraneous Load (Reducible by Instructional Design) Germane Load (Increasable by instructional design) Free Capacity Fig 2 A visual representation of the assumptions underlying cognitive load theory (Plass, Moreno & Brünken 2010; p18)   Total Working Memory Capacity Total Cognitive Load
CLT Instructional techniques The principal of CLT is applied to develop training material that efficiently make use of the available cognitive processing capacity    Instructional design Techniques. ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Cognitive load Theory ,[object Object],[object Object],[object Object]
Instructions and suggestions for interface designers ,[object Object]
[object Object],Instructions and suggestions for interface designers
[object Object],Instructions and suggestions for interface designers
[object Object],Instructions and suggestions for interface designers
Summary
Summary
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Más contenido relacionado

Similar a T 4 Alrashidi

Mash-Up Personal Learning Environments
Mash-Up Personal Learning EnvironmentsMash-Up Personal Learning Environments
Mash-Up Personal Learning EnvironmentsMilos Kravcik
 
TM112 Meeting5-Crossing boundaries.pptx
TM112 Meeting5-Crossing boundaries.pptxTM112 Meeting5-Crossing boundaries.pptx
TM112 Meeting5-Crossing boundaries.pptxMohammedYusuf609377
 
2015_CTI_BSc-IT_Module-Description_Final1
2015_CTI_BSc-IT_Module-Description_Final12015_CTI_BSc-IT_Module-Description_Final1
2015_CTI_BSc-IT_Module-Description_Final1Moses75
 
A Heuristic Based Approach for Usability Evaluation of Academic Portals
A Heuristic Based Approach for Usability Evaluation of Academic PortalsA Heuristic Based Approach for Usability Evaluation of Academic Portals
A Heuristic Based Approach for Usability Evaluation of Academic PortalsAIRCC Publishing Corporation
 
A HEURISTIC-BASED APPROACH FOR USABILITY EVALUATION OF ACADEMIC PORTALS
A HEURISTIC-BASED APPROACH FOR USABILITY EVALUATION OF ACADEMIC PORTALSA HEURISTIC-BASED APPROACH FOR USABILITY EVALUATION OF ACADEMIC PORTALS
A HEURISTIC-BASED APPROACH FOR USABILITY EVALUATION OF ACADEMIC PORTALSijcsit
 
A HEURISTIC-BASED APPROACH FOR USABILITY EVALUATION OF ACADEMIC PORTALS
A HEURISTIC-BASED APPROACH FOR USABILITY EVALUATION OF ACADEMIC PORTALSA HEURISTIC-BASED APPROACH FOR USABILITY EVALUATION OF ACADEMIC PORTALS
A HEURISTIC-BASED APPROACH FOR USABILITY EVALUATION OF ACADEMIC PORTALSAIRCC Publishing Corporation
 
Formalizing the Technical Communication and User Experience Relationship (STC...
Formalizing the Technical Communication and User Experience Relationship (STC...Formalizing the Technical Communication and User Experience Relationship (STC...
Formalizing the Technical Communication and User Experience Relationship (STC...Lori Fisher
 
Note on Tool to Measure Complexity
Note on Tool to Measure Complexity Note on Tool to Measure Complexity
Note on Tool to Measure Complexity John Thomas
 
User Experience & Design…Designing for others…UED
User Experience & Design…Designing for others…UEDUser Experience & Design…Designing for others…UED
User Experience & Design…Designing for others…UEDPreeti Chopra
 
Km knowledge application.11
Km  knowledge application.11Km  knowledge application.11
Km knowledge application.11leilajannati
 
User Interface Analysis and Design
User Interface Analysis and DesignUser Interface Analysis and Design
User Interface Analysis and Design Saqib Raza
 
C H A P T E R6193Design PrinciplesInteraction .docx
C H A P T E R6193Design PrinciplesInteraction .docxC H A P T E R6193Design PrinciplesInteraction .docx
C H A P T E R6193Design PrinciplesInteraction .docxhumphrieskalyn
 
HCI LAB MANUAL
HCI LAB MANUAL HCI LAB MANUAL
HCI LAB MANUAL Um e Farwa
 
User Interface Design - Module 1 Introduction
User Interface Design - Module 1 IntroductionUser Interface Design - Module 1 Introduction
User Interface Design - Module 1 IntroductionbrindaN
 
Aktu Human Computer Interface Full Pdf.pdf
Aktu Human Computer Interface Full Pdf.pdfAktu Human Computer Interface Full Pdf.pdf
Aktu Human Computer Interface Full Pdf.pdfshivaniupadhyay2943
 

Similar a T 4 Alrashidi (20)

CHAPTER 1 RESUME.pptx
CHAPTER 1 RESUME.pptxCHAPTER 1 RESUME.pptx
CHAPTER 1 RESUME.pptx
 
human_factors_03.ppt
human_factors_03.ppthuman_factors_03.ppt
human_factors_03.ppt
 
Intro HCI.pptx
Intro HCI.pptxIntro HCI.pptx
Intro HCI.pptx
 
Mash-Up Personal Learning Environments
Mash-Up Personal Learning EnvironmentsMash-Up Personal Learning Environments
Mash-Up Personal Learning Environments
 
TM112 Meeting5-Crossing boundaries.pptx
TM112 Meeting5-Crossing boundaries.pptxTM112 Meeting5-Crossing boundaries.pptx
TM112 Meeting5-Crossing boundaries.pptx
 
2015_CTI_BSc-IT_Module-Description_Final1
2015_CTI_BSc-IT_Module-Description_Final12015_CTI_BSc-IT_Module-Description_Final1
2015_CTI_BSc-IT_Module-Description_Final1
 
A Heuristic Based Approach for Usability Evaluation of Academic Portals
A Heuristic Based Approach for Usability Evaluation of Academic PortalsA Heuristic Based Approach for Usability Evaluation of Academic Portals
A Heuristic Based Approach for Usability Evaluation of Academic Portals
 
A HEURISTIC-BASED APPROACH FOR USABILITY EVALUATION OF ACADEMIC PORTALS
A HEURISTIC-BASED APPROACH FOR USABILITY EVALUATION OF ACADEMIC PORTALSA HEURISTIC-BASED APPROACH FOR USABILITY EVALUATION OF ACADEMIC PORTALS
A HEURISTIC-BASED APPROACH FOR USABILITY EVALUATION OF ACADEMIC PORTALS
 
A HEURISTIC-BASED APPROACH FOR USABILITY EVALUATION OF ACADEMIC PORTALS
A HEURISTIC-BASED APPROACH FOR USABILITY EVALUATION OF ACADEMIC PORTALSA HEURISTIC-BASED APPROACH FOR USABILITY EVALUATION OF ACADEMIC PORTALS
A HEURISTIC-BASED APPROACH FOR USABILITY EVALUATION OF ACADEMIC PORTALS
 
Formalizing the Technical Communication and User Experience Relationship (STC...
Formalizing the Technical Communication and User Experience Relationship (STC...Formalizing the Technical Communication and User Experience Relationship (STC...
Formalizing the Technical Communication and User Experience Relationship (STC...
 
Note on Tool to Measure Complexity
Note on Tool to Measure Complexity Note on Tool to Measure Complexity
Note on Tool to Measure Complexity
 
User Experience & Design…Designing for others…UED
User Experience & Design…Designing for others…UEDUser Experience & Design…Designing for others…UED
User Experience & Design…Designing for others…UED
 
Km knowledge application.11
Km  knowledge application.11Km  knowledge application.11
Km knowledge application.11
 
User Interface Analysis and Design
User Interface Analysis and DesignUser Interface Analysis and Design
User Interface Analysis and Design
 
C H A P T E R6193Design PrinciplesInteraction .docx
C H A P T E R6193Design PrinciplesInteraction .docxC H A P T E R6193Design PrinciplesInteraction .docx
C H A P T E R6193Design PrinciplesInteraction .docx
 
HCI LAB MANUAL
HCI LAB MANUAL HCI LAB MANUAL
HCI LAB MANUAL
 
User Interface Design - Module 1 Introduction
User Interface Design - Module 1 IntroductionUser Interface Design - Module 1 Introduction
User Interface Design - Module 1 Introduction
 
Slides chapter 12
Slides chapter 12Slides chapter 12
Slides chapter 12
 
[Nux]12 nux
[Nux]12 nux[Nux]12 nux
[Nux]12 nux
 
Aktu Human Computer Interface Full Pdf.pdf
Aktu Human Computer Interface Full Pdf.pdfAktu Human Computer Interface Full Pdf.pdf
Aktu Human Computer Interface Full Pdf.pdf
 

Último

21st_Century_Skills_Framework_Final_Presentation_2.pptx
21st_Century_Skills_Framework_Final_Presentation_2.pptx21st_Century_Skills_Framework_Final_Presentation_2.pptx
21st_Century_Skills_Framework_Final_Presentation_2.pptxJoelynRubio1
 
FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024Elizabeth Walsh
 
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptxHMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptxEsquimalt MFRC
 
Spring gala 2024 photo slideshow - Celebrating School-Community Partnerships
Spring gala 2024 photo slideshow - Celebrating School-Community PartnershipsSpring gala 2024 photo slideshow - Celebrating School-Community Partnerships
Spring gala 2024 photo slideshow - Celebrating School-Community Partnershipsexpandedwebsite
 
e-Sealing at EADTU by Kamakshi Rajagopal
e-Sealing at EADTU by Kamakshi Rajagopale-Sealing at EADTU by Kamakshi Rajagopal
e-Sealing at EADTU by Kamakshi RajagopalEADTU
 
AIM of Education-Teachers Training-2024.ppt
AIM of Education-Teachers Training-2024.pptAIM of Education-Teachers Training-2024.ppt
AIM of Education-Teachers Training-2024.pptNishitharanjan Rout
 
MuleSoft Integration with AWS Textract | Calling AWS Textract API |AWS - Clou...
MuleSoft Integration with AWS Textract | Calling AWS Textract API |AWS - Clou...MuleSoft Integration with AWS Textract | Calling AWS Textract API |AWS - Clou...
MuleSoft Integration with AWS Textract | Calling AWS Textract API |AWS - Clou...MysoreMuleSoftMeetup
 
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...Nguyen Thanh Tu Collection
 
Andreas Schleicher presents at the launch of What does child empowerment mean...
Andreas Schleicher presents at the launch of What does child empowerment mean...Andreas Schleicher presents at the launch of What does child empowerment mean...
Andreas Schleicher presents at the launch of What does child empowerment mean...EduSkills OECD
 
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptxCOMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptxannathomasp01
 
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...Nguyen Thanh Tu Collection
 
Observing-Correct-Grammar-in-Making-Definitions.pptx
Observing-Correct-Grammar-in-Making-Definitions.pptxObserving-Correct-Grammar-in-Making-Definitions.pptx
Observing-Correct-Grammar-in-Making-Definitions.pptxAdelaideRefugio
 
How to Send Pro Forma Invoice to Your Customers in Odoo 17
How to Send Pro Forma Invoice to Your Customers in Odoo 17How to Send Pro Forma Invoice to Your Customers in Odoo 17
How to Send Pro Forma Invoice to Your Customers in Odoo 17Celine George
 
UChicago CMSC 23320 - The Best Commit Messages of 2024
UChicago CMSC 23320 - The Best Commit Messages of 2024UChicago CMSC 23320 - The Best Commit Messages of 2024
UChicago CMSC 23320 - The Best Commit Messages of 2024Borja Sotomayor
 
Rich Dad Poor Dad ( PDFDrive.com )--.pdf
Rich Dad Poor Dad ( PDFDrive.com )--.pdfRich Dad Poor Dad ( PDFDrive.com )--.pdf
Rich Dad Poor Dad ( PDFDrive.com )--.pdfJerry Chew
 
Diuretic, Hypoglycemic and Limit test of Heavy metals and Arsenic.-1.pdf
Diuretic, Hypoglycemic and Limit test of Heavy metals and Arsenic.-1.pdfDiuretic, Hypoglycemic and Limit test of Heavy metals and Arsenic.-1.pdf
Diuretic, Hypoglycemic and Limit test of Heavy metals and Arsenic.-1.pdfKartik Tiwari
 
Graduate Outcomes Presentation Slides - English (v3).pptx
Graduate Outcomes Presentation Slides - English (v3).pptxGraduate Outcomes Presentation Slides - English (v3).pptx
Graduate Outcomes Presentation Slides - English (v3).pptxneillewis46
 

Último (20)

21st_Century_Skills_Framework_Final_Presentation_2.pptx
21st_Century_Skills_Framework_Final_Presentation_2.pptx21st_Century_Skills_Framework_Final_Presentation_2.pptx
21st_Century_Skills_Framework_Final_Presentation_2.pptx
 
FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024
 
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptxHMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
 
Spring gala 2024 photo slideshow - Celebrating School-Community Partnerships
Spring gala 2024 photo slideshow - Celebrating School-Community PartnershipsSpring gala 2024 photo slideshow - Celebrating School-Community Partnerships
Spring gala 2024 photo slideshow - Celebrating School-Community Partnerships
 
e-Sealing at EADTU by Kamakshi Rajagopal
e-Sealing at EADTU by Kamakshi Rajagopale-Sealing at EADTU by Kamakshi Rajagopal
e-Sealing at EADTU by Kamakshi Rajagopal
 
AIM of Education-Teachers Training-2024.ppt
AIM of Education-Teachers Training-2024.pptAIM of Education-Teachers Training-2024.ppt
AIM of Education-Teachers Training-2024.ppt
 
MuleSoft Integration with AWS Textract | Calling AWS Textract API |AWS - Clou...
MuleSoft Integration with AWS Textract | Calling AWS Textract API |AWS - Clou...MuleSoft Integration with AWS Textract | Calling AWS Textract API |AWS - Clou...
MuleSoft Integration with AWS Textract | Calling AWS Textract API |AWS - Clou...
 
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...
 
OS-operating systems- ch05 (CPU Scheduling) ...
OS-operating systems- ch05 (CPU Scheduling) ...OS-operating systems- ch05 (CPU Scheduling) ...
OS-operating systems- ch05 (CPU Scheduling) ...
 
Andreas Schleicher presents at the launch of What does child empowerment mean...
Andreas Schleicher presents at the launch of What does child empowerment mean...Andreas Schleicher presents at the launch of What does child empowerment mean...
Andreas Schleicher presents at the launch of What does child empowerment mean...
 
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptxCOMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
 
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
 
Observing-Correct-Grammar-in-Making-Definitions.pptx
Observing-Correct-Grammar-in-Making-Definitions.pptxObserving-Correct-Grammar-in-Making-Definitions.pptx
Observing-Correct-Grammar-in-Making-Definitions.pptx
 
VAMOS CUIDAR DO NOSSO PLANETA! .
VAMOS CUIDAR DO NOSSO PLANETA!                    .VAMOS CUIDAR DO NOSSO PLANETA!                    .
VAMOS CUIDAR DO NOSSO PLANETA! .
 
How to Send Pro Forma Invoice to Your Customers in Odoo 17
How to Send Pro Forma Invoice to Your Customers in Odoo 17How to Send Pro Forma Invoice to Your Customers in Odoo 17
How to Send Pro Forma Invoice to Your Customers in Odoo 17
 
UChicago CMSC 23320 - The Best Commit Messages of 2024
UChicago CMSC 23320 - The Best Commit Messages of 2024UChicago CMSC 23320 - The Best Commit Messages of 2024
UChicago CMSC 23320 - The Best Commit Messages of 2024
 
Including Mental Health Support in Project Delivery, 14 May.pdf
Including Mental Health Support in Project Delivery, 14 May.pdfIncluding Mental Health Support in Project Delivery, 14 May.pdf
Including Mental Health Support in Project Delivery, 14 May.pdf
 
Rich Dad Poor Dad ( PDFDrive.com )--.pdf
Rich Dad Poor Dad ( PDFDrive.com )--.pdfRich Dad Poor Dad ( PDFDrive.com )--.pdf
Rich Dad Poor Dad ( PDFDrive.com )--.pdf
 
Diuretic, Hypoglycemic and Limit test of Heavy metals and Arsenic.-1.pdf
Diuretic, Hypoglycemic and Limit test of Heavy metals and Arsenic.-1.pdfDiuretic, Hypoglycemic and Limit test of Heavy metals and Arsenic.-1.pdf
Diuretic, Hypoglycemic and Limit test of Heavy metals and Arsenic.-1.pdf
 
Graduate Outcomes Presentation Slides - English (v3).pptx
Graduate Outcomes Presentation Slides - English (v3).pptxGraduate Outcomes Presentation Slides - English (v3).pptx
Graduate Outcomes Presentation Slides - English (v3).pptx
 

T 4 Alrashidi

  • 1. Effective Interface Design By Avoiding Cognitive Overload – Addressing issues with Visual Design Abdullah ALRASHIDI EDGE903 - 2011
  • 3.
  • 4. • Graphical User Interface (GUI) – is the user visual interface that allow users to interacting with a computer using items such as windows and icons (Norman 2004). • Design considerations principles: organize, economize and communicate. It should take into account human factors and cognitive ability.
  • 5. • Organize – consistency, screen layout, relationships and navigability are important concepts • Consistency – match with the real world – what users are used to. • Screen layout – the general 7+/-2 rule is essential to considered to avoid information overload. Designing visual representation can designed according to CLT to avoid overload • CLT to properly design learning materials  avoid cognitive overload
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 17.