SWE 632
Project Screen Design Notes
Fall 2014
Jeff Offutt
http://www.cs.gmu.edu/~offutt/
SWE 632
User Interface Design and Development
Summary
• Overall : I really hoped for better designs
–
–
–
–
Lots of good ideas
Some fundamental mistakes
Too many screens, irrelevant info, confusing terminology
Some of you did not apply the principles from class—I expect
your project to be better than it would have been in August
– Some designs look too much like the existing web application
• You must look at your own design with the same critical
eye you have been using with the evaluations
– Don’t just DO, you need to THINK
• This milestone was about design not the implementation
– You should apply my suggestions to the final project
• If you have trouble reading my comments, please ask
1 July 2016
© Jeff Offutt
2
Problems With Existing GSB
• Requesting a speaker :
– Users view talks and speakers, and find one they like
– Then navigate back to the top, and go to “request a speaker”
– Then they have to remember the talk they liked …
• Categories mean different things to different people
– Does “research” mean finding something in the library, solving
new problems, or designing and conducting experiments?
• Category names are not universal
– Should I search for “web” or “internet” ?
– When adding talks, what if a speaker’s topic does not fit into an
existing category ?
– The category selection expects users to have the same mental
model that the developers had
1 July 2016
© Jeff Offutt
3
Problems With Existing GSB
• Searching puts a wall between users and information
– http://masonspeakers.gmu.edu/find-a-speaker/
– At the grocery, do you want to ask a grocer to go pick up
specific items, or browse the aisles to see what’s available ?
• Will users want to browse or search ?
– Searchers have a strong idea what they want, browsers do not
– Searching is for intermediate users, browsing is for beginners
• First screen (splash) is useless :
–
–
–
–
1 July 2016
A menu
Irrelevant pictures
A descriptive paragraph that few will read
A huge chunk of screen real estate at the top with a menu that is
completely unrelated
© Jeff Offutt
4
Problems With Existing GSB
• The “Promoting Your Event” screen is not useful
• Tag line ?
– Used to be : “connecting mason to the community”
– No tag line in the new version
1 July 2016
© Jeff Offutt
5
Please don’t repeat the usability
mistakes of the existing system
1 July 2016
© Jeff Offutt
6
Project Issues
• Some of you reverted to old habits—designing a UI as you
would have before taking the course
• Think hard about the first screen …
– What type of user is it primarily serving ?
– What information do those users want to see ?
– Menus offer navigation—try to give users content first
• A menu like :
– [ Find speaker ] [ Request speaker ] [ Become speaker ] [ Add talk ]
puts the probable and possibles at an equal level
– What is probable ?
– Start with that and provide navigation to the possibles
– (This is an inherent problem with menus)
1 July 2016
© Jeff Offutt
7
Project Issues
• Lots of verb-object designs … think visually
– A talk is the object, request is the verb
•
•
•
•
Splash screens are barriers to content or functionality
Use constrained controls as much as possible
Speakers can have multiple talks
How about offering statistics on talks ?
– First time given, number of times given, …
• Speakers are hosted at events off campus
– Which users will come to this web site to see who is speaking at
their event ?
• How can a user request a topic that is not listed ?
1 July 2016
© Jeff Offutt
8
Minor Presentation Things
• Typos on screens look unprofessional
– Make sure you edit thoroughly
• Titles … Prof., Dr., Mr., Mrs., Ms. ?
– I’m neither pretentious nor picky … I’m fine if students call me
by first name (“Jeff”)
– Using first name is fine for some teachers, but not all
– “Prof.” is acceptable for anybody teaching at a university
– “Dr.” is only allowable for people who have an “earned” (that is,
not honorary) PhD
– Using “Mr.”, “Mrs.”, or “Ms.” in an academic setting, for
someone who has a PhD, is considered disrespectful
• “much better” … “better” than what ?
– Must have something to compare with
1 July 2016
© Jeff Offutt
9
General Usability Comments
• Selecting is less error prone than typing
• Radio buttons are faster and less error prone than
dropdowns
• Can login be integrated with the main screen ?
– Can registration be integrated with login ?
• Filter vs Search
–
–
–
–
Search starts with nothing and often results in nothing
Filtering starts with everything and usually results in something
http://ui-patterns.com/patterns/TableFilter
http://ui-patterns.com/patterns/LiveFilter
• Do not map each feature to a separate screen, combine
– Support navigation within information, not among windows
1 July 2016
© Jeff Offutt
10
General Usability Comments (2)
• Users expect to be logged in automatically after creating
an account
• Lots of unnecessary and awkward navigation
• A few “screen happy” designs
– Fewer screens means less navigation
• Make rules clear before validating and telling users they
violated a rule
1 July 2016
© Jeff Offutt
11
Navigation Reminders
•
•
•
•
Navigation is moving around a UI
Navigation is never about the users goals
Navigation is always excise
Four types of navigation
1.
2.
3.
4.
1 July 2016
Among multiple windows and screens
Navigation among panes or frames in a window
Navigation among tools and menus
Navigation within information (scrolling, zooming, …)
© Jeff Offutt
12
Avoid Barriers
• A password is protection, but also a barrier
– Letting users have partial access without creating an account is
good marketing
• A menu reminds users what they can do, but is also a
barrier to information
• Mostly blank screens always look like barriers
– Always give users information – a blank screen with a small
menu is a waste of screen real estate
• Example of probable / possible becoming a barrier:
probable
Language
English
Other
1 July 2016
possible
© Jeff Offutt
13
Please use my suggestions to make
your final submission better
1 July 2016
© Jeff Offutt
14