Challenges and Considerations in GUI Design

 
G
U
I
 
d
e
s
i
g
n
 
c
o
n
s
i
d
e
r
a
t
i
o
n
s
 
Dr. Riley
(with some edits by Dr. Yoder)
 
In modern software, the user interface code
can constitute the majority of the program
Creating a good UI is often harder than writing
the software
Often, the user interface is the key to the
success or failure of a program
Apple did not invent the mouse…
Design is Difficult!
 
3
 
A Spiral Process
 
User interface development follows a spiral process
Interface analysis (user, task, and environment analysis)
Interface design
Defines a set of interface 
objects
 and 
actions
Interface implementation
Begins with a prototype
Interface validation (testing)
The degree to which the interface is easy to use and easy to learn
 
Layout Principles
 
 
Gestalt
Proximity
Similarity
Closure
Other
Visibility
Constraints
Mapping
 
In modern software, the user interface code
can constitute the majority of the program
Creating a good UI is often harder than writing
the software
Often, the user interface is the key to the
success or failure of a program
Apple did not invent the mouse…
Computer speed increases by Moore’s law,
humans do not
Design is Difficult!
 
Complexity of the Human Brain
 
86 Billion Neurons
The i7 has about 1.7 Billion Transistors
Each neuron is a cell and has additional
working parts internally.
Neurons communicate not only
electrically, but chemically as well
Think what drugs do to brains
8 Billion people, each different
(Even more computers – 10 billion
manufactured in one year alone)
 
https://www.extremetech.com/computing/1
90946-stop-obsessing-over-transistor-
counts-theyre-a-terrible-way-of-comparing-
chips
 
Rules about Developing for Users
 
R
u
l
e
 
#
1
:
A
l
l
 
u
s
e
r
s
 
a
r
e
 
n
o
t
 
l
i
k
e
 
y
o
u
.
R
u
l
e
 
#
2
:
A
l
l
 
u
s
e
r
s
 
a
r
e
 
n
o
t
 
a
l
i
k
e
.
Consider:
Physical & cognitive abilities & special needs
Personality & culture
Knowledge & skills
Motivation
 
Competing for customers
 
About 1 in 7 Americans has a
disability
 
 About 1 in 3 Americans has a family
member or coworker with a disability
 
Designing for “average” users
 
Some of us are just a
little more average
than others
 
 
 
 
Age, disabilities, and
situations make
each of us
unique…
 
-George Carlin
 
Affordances: to give a clue
 
Refers to an attribute of an object that allows
people to know how to use it
a mouse button invites pushing
a door handle affords pulling
Norman (1988) used the term to discuss the
design of everyday objects
Since then has been popularized in interaction
design to discuss how to design interface
objects
E.g. scrollbars to afford moving up and down, icons to
afford clicking on
Is the Apple “swipe” on an iPad an
affordance?
 
Activity
 
Physical affordances:
How do the following physical objects afford? Are
they obvious?
Are they universally designed?
 
 
Activity
 
Virtual affordances
How do the following screen objects afford?
What if you were a novice user?
Would you know what to do with them?
 
Activity
: Physical and Perceived
Affordances
 
Consider a “smart” phone
In a small group
Identify any 
physical affordances
 the device has
Identify any perceived or visual affordances the
software user interface has
Write these down, to be shared
 
Fitts
 Law 
(Paul Fitts 1954)
 
The law predicts that the time to
point at an object using a device is a
function
Relating the distance from the target
object & the object
s size.
Time = a + b log (Dist/Width + 1)
a and b are constants
Dist is the distance the finger needs to
move
Width is across the tap target
The further away & the smaller the
object
the longer the time to locate it and point
 
 
Fitts Law Limitations
 
Bigger doesn’t always mean faster
It can just mean fewer buttons can be
displayed
 
 
 
 
 
http://www.particletree.com/features/visuali
zing-fittss-law/
 
Which is faster?
 
 
Why oh why?
 
What
s wrong with
Windows’ start
button?
Relate it to “Fitts’ Law”
What about slider
bars?
Understand Fitts
 Law?
 
Is there a benefit to having a label under the icon
on the Windows desktop?
If you have an auto-hidden Taskbar on Windows,
how can this be irritating?
Does this confirm something about Fitts
 Law?
How would Fitts
 law impact your layout of
buttons, fields, etc. in a dialog box?
 
Example, Windows
 
How have they improved the layout in
Windows 10 to adhere more closely to
Fitts’ Law?
Application of Fitts’ Law
What implications do the button
placements have?
On the image above
Consider Fitts’ Law
How could this be redesigned?
 
Case Study
 
A new UI for cars…
http://www.youtube.com/watch?v=XVbuk3j
izGM&feature=youtu.be
 
Using Text Well
 
Goal: legibility
Font is typeface + size
Factors to consider
Sans serif better than serif on screen
Not too big, not too small
10 or 12 point is smallest
Extended chunks of bold or italic harder to read
Spacing between lines
Too much and lines don’
t group in user’s mind
Using Text Well
 
Underlining:  a web-link or emphasis?
Consistency
Common issue on web-pages
Background / font-color combinations
Black on white
Lighter on darker (e.g. presentations in large rooms)
Some you should avoid?
Can you read this easily?
Can you read this easily?
Can you read this easily?
 
General Guidelines: Text
 
Keep text to a minimum
50% of what you
 had in printed form
Lists not paragraphs
Help users scan for information
Good headings and subheadings
Highlight important things
Good organization
Divide long blocks into sections or pages
Slide Note
Embed
Share

Designing a user interface is a complex process that can determine the success or failure of a software program. Dr. Riley and Dr. Yoder highlight the difficulties in creating effective GUIs, emphasizing the importance of layout principles, understanding user needs, and considering the diverse abilities and needs of users. The process of UI development follows a spiral model, involving analysis, design, implementation, and validation. Remembering that all users are unique and may have varying physical, cognitive, and cultural backgrounds is essential for creating inclusive and user-friendly interfaces.


Uploaded on Sep 06, 2024 | 5 Views


Download Presentation

Please find below an Image/Link to download the presentation.

The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.

E N D

Presentation Transcript


  1. GUI design considerations Dr. Riley (with some edits by Dr. Yoder)

  2. Design is Difficult! In modern software, the user interface code can constitute the majority of the program Creating a good UI is often harder than writing the software Often, the user interface is the key to the success or failure of a program Apple did not invent the mouse

  3. A Spiral Process User interface development follows a spiral process Interface analysis (user, task, and environment analysis) Interface design Defines a set of interface objects and actions Interface implementation Begins with a prototype Interface validation (testing) The degree to which the interface is easy to use and easy to learn 3

  4. Layout Principles Gestalt Proximity Similarity Closure Other Visibility Constraints Mapping

  5. Design is Difficult! In modern software, the user interface code can constitute the majority of the program Creating a good UI is often harder than writing the software Often, the user interface is the key to the success or failure of a program Apple did not invent the mouse Computer speed increases by Moore s law, humans do not

  6. Complexity of the Human Brain https://www.extremetech.com/computing/1 90946-stop-obsessing-over-transistor- counts-theyre-a-terrible-way-of-comparing chips 86 Billion Neurons The i7 has about 1.7 Billion Transistors Each neuron is a cell and has additional working parts internally. Neurons communicate not only electrically, but chemically as well Think what drugs do to brains 8 Billion people, each different (Even more computers 10 billion manufactured in one year alone)

  7. Rules about Developing for Users Rule #1: All users are not like you. Rule #2: All users are not alike. Consider: Physical & cognitive abilities & special needs Personality & culture Knowledge & skills Motivation

  8. Competing for customers About 1 in 7 Americans has a disability About 1 in 3 Americans has a family member or coworker with a disability

  9. Designing for average users Some of us are just a little more average than others Age, disabilities, and situations make each of us -George Carlin unique

  10. Affordances: to give a clue Refers to an attribute of an object that allows people to know how to use it a mouse button invites pushing a door handle affords pulling Norman (1988) used the term to discuss the design of everyday objects Since then has been popularized in interaction design to discuss how to design interface objects E.g. scrollbars to afford moving up and down, icons to afford clicking on Is the Apple swipe on an iPad an affordance?

  11. Activity Physical affordances: How do the following physical objects afford? Are they obvious? Are they universally designed?

  12. Activity Virtual affordances How do the following screen objects afford? What if you were a novice user? Would you know what to do with them?

  13. Activity: Physical and Perceived Affordances Consider a smart phone In a small group Identify any physical affordances the device has Identify any perceived or visual affordances the software user interface has Write these down, to be shared

  14. Fitts Law (Paul Fitts 1954) The law predicts that the time to point at an object using a device is a function Relating the distance from the target object & the object s size. Time = a + b log (Dist/Width + 1) a and b are constants Dist is the distance the finger needs to move Width is across the tap target The further away & the smaller the object the longer the time to locate it and point

  15. Fitts Law Limitations Bigger doesn t always mean faster It can just mean fewer buttons can be displayed http://www.particletree.com/features/visuali zing-fittss-law/

  16. Which is faster?

  17. Why oh why? What s wrong with Windows start button? Relate it to Fitts Law What about slider bars?

  18. Understand Fitts Law? Is there a benefit to having a label under the icon on the Windows desktop? If you have an auto-hidden Taskbar on Windows, how can this be irritating? Does this confirm something about Fitts Law? How would Fitts law impact your layout of buttons, fields, etc. in a dialog box?

  19. Example, Windows How have they improved the layout in Windows 10 to adhere more closely to Fitts Law?

  20. Application of Fitts Law What implications do the button placements have? On the image above Consider Fitts Law How could this be redesigned?

  21. Case Study A new UI for cars http://www.youtube.com/watch?v=XVbuk3j izGM&feature=youtu.be

  22. Using Text Well Goal: legibility Font is typeface + size Factors to consider Sans serif better than serif on screen Not too big, not too small 10 or 12 point is smallest Extended chunks of bold or italic harder to read Spacing between lines Too much and lines don t group in user s mind

  23. Using Text Well Underlining: a web-link or emphasis? Consistency Common issue on web-pages Background / font-color combinations Black on white Lighter on darker (e.g. presentations in large rooms) Some you should avoid? Can you read this easily? Can you read this easily? Can you read this easily?

  24. General Guidelines: Text Keep text to a minimum 50% of what you had in printed form Lists not paragraphs Help users scan for information Good headings and subheadings Highlight important things Good organization Divide long blocks into sections or pages

More Related Content

giItT1WQy@!-/#giItT1WQy@!-/#giItT1WQy@!-/#giItT1WQy@!-/#giItT1WQy@!-/#