SlideShare a Scribd company logo
1 of 9
What have they got in
common?
Learning outcomes

By the end of today’s lesson;
• All of you will know what needs to be in a
  basic graphical user interface (D-E)
• Most of you will describe the differences
  between a good and bad GUI (B-C)
• Some of you will analyse existing GUIs from
  websites and describe the positive and
  negative features of each (A*-A)
Good GUI
Top 10 things to look for.
1. Organise and group related parts of an
   interface
2. Keep all buttons the same size and style,
   and keep them grouped.
3. Use meaningful captions for your buttons
4. Use meaningful labels for each control
5. Keep a consistent margin
Good GUI
Top 10 things to look for.
6. Only include graphics if necessary
7. Keep font styles consistent
8. Add colour only when necessary
9. Always use dark text on a light
   background
10.A good user interface is one that
   shouldn’t be noticed.
Your task
On Jogle (F452 Topic 14) download and complete the
GUI template document.
• Using all good GUI design methods will allow you to
  get up to the A/A* grades.
• Make it as clear as possible
• Use your feedback from the exam paper to help

Once you have completed this, create a new forum
post and upload it to there. You should explain in your
post why good GUI design is important.
Peer Assessment
Have a look at the other forum posts from your peers
and give them some feedback in the WWW EBI
format.
Success Criteria;
• Clear title at the top of the page
• Input boxes for length, colour and where spotted.
• These input boxes should be radio buttons/drop down/list
  boxes
• Submit and reset buttons
• Output for an image and text
• Output should allow user to see multiple responses.
GUI
What would you change in this GUI to improve it?
Learning outcomes
By the end of today’s lesson;
• All of you will know what needs to be in a basic
  graphical user interface (D-E)
• Most of you will describe the differences between
  a good and bad GUI (B-C)
• Some of you will analyse existing GUIs from
  websites and describe the positive and negative
  features of each (A*-A)
Research Task
You will need to do some research to find some
examples of good and not so good GUIs. You should
include;
• 2 examples of good GUIs (D/E)
• 2 examples of bad GUIs (D/E)
• Describe at least 5 points for each to explain why
   they are good/bad (B/C)
• You will use technical language throughout (B/C)
• For the bad GUIs you will need to compare it to a
   similar good GUI and explain how you would
   improve it (A*/A)

More Related Content

Viewers also liked (20)

L3 more networking
L3   more networkingL3   more networking
L3 more networking
 
L5
L5L5
L5
 
L5
L5L5
L5
 
Planning Your Code
Planning Your CodePlanning Your Code
Planning Your Code
 
L8
L8L8
L8
 
L3 how do images work
L3   how do images workL3   how do images work
L3 how do images work
 
Sitton Spelling Review
Sitton Spelling ReviewSitton Spelling Review
Sitton Spelling Review
 
L4
L4L4
L4
 
Kane's Presentation
Kane's Presentation Kane's Presentation
Kane's Presentation
 
L2
L2L2
L2
 
L2
L2L2
L2
 
C:\documents and settings\sandy.hawkins\my documents\anne frank powerpoint
C:\documents and settings\sandy.hawkins\my documents\anne frank powerpointC:\documents and settings\sandy.hawkins\my documents\anne frank powerpoint
C:\documents and settings\sandy.hawkins\my documents\anne frank powerpoint
 
L2
L2L2
L2
 
Fire of london_questions
Fire of london_questionsFire of london_questions
Fire of london_questions
 
Roll out the barrel
Roll out the barrelRoll out the barrel
Roll out the barrel
 
L1
L1L1
L1
 
L1
L1L1
L1
 
L1
L1L1
L1
 
Term 1 - C&B Stars
Term 1 - C&B StarsTerm 1 - C&B Stars
Term 1 - C&B Stars
 
Introduction to operating systems
Introduction to operating systemsIntroduction to operating systems
Introduction to operating systems
 

Similar to Graphical User Interface

Game Design 2: UI in Games - Revision Lecture
Game Design 2: UI in Games - Revision LectureGame Design 2: UI in Games - Revision Lecture
Game Design 2: UI in Games - Revision Lecture
David Farrell
 
Web design content
Web design contentWeb design content
Web design content
MrCHenderson
 
Deconstructing/Reconstructing User Experience
Deconstructing/Reconstructing User ExperienceDeconstructing/Reconstructing User Experience
Deconstructing/Reconstructing User Experience
Mike Kornacki
 
Cp exam sectiona
Cp exam sectionaCp exam sectiona
Cp exam sectiona
Kim Fyson
 
OCR Media Studies A2 Section A
OCR Media Studies A2 Section AOCR Media Studies A2 Section A
OCR Media Studies A2 Section A
Kim Fyson
 
EEECSE 120 Answer SheetCapstone Design Project .docx
EEECSE 120 Answer SheetCapstone Design Project             .docxEEECSE 120 Answer SheetCapstone Design Project             .docx
EEECSE 120 Answer SheetCapstone Design Project .docx
toltonkendal
 
Edge903 Project
Edge903 ProjectEdge903 Project
Edge903 Project
xyz01
 
HS2031 Human Computer Interaction Assignment 2 Page 1 of 5 .docx
HS2031 Human Computer Interaction Assignment 2 Page 1 of 5  .docxHS2031 Human Computer Interaction Assignment 2 Page 1 of 5  .docx
HS2031 Human Computer Interaction Assignment 2 Page 1 of 5 .docx
pooleavelina
 

Similar to Graphical User Interface (20)

Game Design 2: UI in Games - Revision Lecture
Game Design 2: UI in Games - Revision LectureGame Design 2: UI in Games - Revision Lecture
Game Design 2: UI in Games - Revision Lecture
 
Web design content
Web design contentWeb design content
Web design content
 
Web design content
Web design contentWeb design content
Web design content
 
GUI Testing
GUI TestingGUI Testing
GUI Testing
 
A competitive analysis for a digital product
A competitive analysis for a digital productA competitive analysis for a digital product
A competitive analysis for a digital product
 
Interface Design
Interface DesignInterface Design
Interface Design
 
Cets 2016 felstehausen wallace to use a layer state change or new slide, that...
Cets 2016 felstehausen wallace to use a layer state change or new slide, that...Cets 2016 felstehausen wallace to use a layer state change or new slide, that...
Cets 2016 felstehausen wallace to use a layer state change or new slide, that...
 
Deconstructing/Reconstructing User Experience
Deconstructing/Reconstructing User ExperienceDeconstructing/Reconstructing User Experience
Deconstructing/Reconstructing User Experience
 
Cp exam sectiona
Cp exam sectionaCp exam sectiona
Cp exam sectiona
 
OCR Media Studies A2 Section A
OCR Media Studies A2 Section AOCR Media Studies A2 Section A
OCR Media Studies A2 Section A
 
Game design 2 (2013): Lecture 14 - Revision
Game design 2 (2013): Lecture 14 - RevisionGame design 2 (2013): Lecture 14 - Revision
Game design 2 (2013): Lecture 14 - Revision
 
EEECSE 120 Answer SheetCapstone Design Project .docx
EEECSE 120 Answer SheetCapstone Design Project             .docxEEECSE 120 Answer SheetCapstone Design Project             .docx
EEECSE 120 Answer SheetCapstone Design Project .docx
 
Post production
Post productionPost production
Post production
 
(2) cpp imperative programming_exercises
(2) cpp imperative programming_exercises(2) cpp imperative programming_exercises
(2) cpp imperative programming_exercises
 
Implementing Modernization by Trevor Perry
Implementing Modernization by Trevor PerryImplementing Modernization by Trevor Perry
Implementing Modernization by Trevor Perry
 
Edge903 Project
Edge903 ProjectEdge903 Project
Edge903 Project
 
iBooks Author for Advanced Users and Projects
iBooks Author for Advanced Users and Projects iBooks Author for Advanced Users and Projects
iBooks Author for Advanced Users and Projects
 
Section a question 1 a postproduction
Section a question 1 a postproductionSection a question 1 a postproduction
Section a question 1 a postproduction
 
Became a pro Front End Development Sassy Infotech.pptx
Became a pro Front End Development Sassy Infotech.pptxBecame a pro Front End Development Sassy Infotech.pptx
Became a pro Front End Development Sassy Infotech.pptx
 
HS2031 Human Computer Interaction Assignment 2 Page 1 of 5 .docx
HS2031 Human Computer Interaction Assignment 2 Page 1 of 5  .docxHS2031 Human Computer Interaction Assignment 2 Page 1 of 5  .docx
HS2031 Human Computer Interaction Assignment 2 Page 1 of 5 .docx
 

More from listergc

Validation, verification, output and backup
Validation, verification, output and backupValidation, verification, output and backup
Validation, verification, output and backup
listergc
 
L4 internet security
L4   internet securityL4   internet security
L4 internet security
listergc
 
L1 networking basics
L1   networking basicsL1   networking basics
L1 networking basics
listergc
 
L1 networking basics
L1   networking basicsL1   networking basics
L1 networking basics
listergc
 
L2 communication methods
L2   communication methodsL2   communication methods
L2 communication methods
listergc
 
Y12 peripherals
Y12   peripherals Y12   peripherals
Y12 peripherals
listergc
 
Y12 peripherals
Y12   peripherals Y12   peripherals
Y12 peripherals
listergc
 
Describe primary and secondary memory inc
Describe primary and secondary memory incDescribe primary and secondary memory inc
Describe primary and secondary memory inc
listergc
 
Systems software and applications packages
Systems software and applications packagesSystems software and applications packages
Systems software and applications packages
listergc
 
Components of a computer system
Components of a computer systemComponents of a computer system
Components of a computer system
listergc
 
Key database terms
Key database termsKey database terms
Key database terms
listergc
 
Normalisation
NormalisationNormalisation
Normalisation
listergc
 
Normalisation
NormalisationNormalisation
Normalisation
listergc
 

More from listergc (19)

L2
L2L2
L2
 
Validation, verification, output and backup
Validation, verification, output and backupValidation, verification, output and backup
Validation, verification, output and backup
 
L4 internet security
L4   internet securityL4   internet security
L4 internet security
 
L1 networking basics
L1   networking basicsL1   networking basics
L1 networking basics
 
L1 networking basics
L1   networking basicsL1   networking basics
L1 networking basics
 
L2 communication methods
L2   communication methodsL2   communication methods
L2 communication methods
 
L7
L7L7
L7
 
L6
L6L6
L6
 
Y12 peripherals
Y12   peripherals Y12   peripherals
Y12 peripherals
 
Y12 peripherals
Y12   peripherals Y12   peripherals
Y12 peripherals
 
Describe primary and secondary memory inc
Describe primary and secondary memory incDescribe primary and secondary memory inc
Describe primary and secondary memory inc
 
L7
L7L7
L7
 
L6
L6L6
L6
 
Systems software and applications packages
Systems software and applications packagesSystems software and applications packages
Systems software and applications packages
 
Components of a computer system
Components of a computer systemComponents of a computer system
Components of a computer system
 
Key database terms
Key database termsKey database terms
Key database terms
 
Normalisation
NormalisationNormalisation
Normalisation
 
Normalisation
NormalisationNormalisation
Normalisation
 
L4
L4L4
L4
 

Graphical User Interface

  • 1. What have they got in common?
  • 2. Learning outcomes By the end of today’s lesson; • All of you will know what needs to be in a basic graphical user interface (D-E) • Most of you will describe the differences between a good and bad GUI (B-C) • Some of you will analyse existing GUIs from websites and describe the positive and negative features of each (A*-A)
  • 3. Good GUI Top 10 things to look for. 1. Organise and group related parts of an interface 2. Keep all buttons the same size and style, and keep them grouped. 3. Use meaningful captions for your buttons 4. Use meaningful labels for each control 5. Keep a consistent margin
  • 4. Good GUI Top 10 things to look for. 6. Only include graphics if necessary 7. Keep font styles consistent 8. Add colour only when necessary 9. Always use dark text on a light background 10.A good user interface is one that shouldn’t be noticed.
  • 5. Your task On Jogle (F452 Topic 14) download and complete the GUI template document. • Using all good GUI design methods will allow you to get up to the A/A* grades. • Make it as clear as possible • Use your feedback from the exam paper to help Once you have completed this, create a new forum post and upload it to there. You should explain in your post why good GUI design is important.
  • 6. Peer Assessment Have a look at the other forum posts from your peers and give them some feedback in the WWW EBI format. Success Criteria; • Clear title at the top of the page • Input boxes for length, colour and where spotted. • These input boxes should be radio buttons/drop down/list boxes • Submit and reset buttons • Output for an image and text • Output should allow user to see multiple responses.
  • 7. GUI What would you change in this GUI to improve it?
  • 8. Learning outcomes By the end of today’s lesson; • All of you will know what needs to be in a basic graphical user interface (D-E) • Most of you will describe the differences between a good and bad GUI (B-C) • Some of you will analyse existing GUIs from websites and describe the positive and negative features of each (A*-A)
  • 9. Research Task You will need to do some research to find some examples of good and not so good GUIs. You should include; • 2 examples of good GUIs (D/E) • 2 examples of bad GUIs (D/E) • Describe at least 5 points for each to explain why they are good/bad (B/C) • You will use technical language throughout (B/C) • For the bad GUIs you will need to compare it to a similar good GUI and explain how you would improve it (A*/A)