E N D
1. Screen Design Advanced Systems Analysis & Design
2. Screen Design & Web Site Goals Content
Engaging to Target Audience
Intuitive navigation
3. Content, Format, Access
4. Engaging to Target Audience
5. Intuitive navigation
7. Fundamentals of Screen Design Menu Bar – Follow some metaphor or common example, e.g., Windows
Templates – Use a single template for all screens
Content detail – The only items that change on a screen
8. Menu Bar and Background
9. Templates
10. Content detail
11. Designing a Screens Define the target audience
Define the central message – focal point for all screens
Define content
Generate ideas on how to make it interesting
12. Define the Target Audience Computer expertise
Computer experts or novices or both
Content/functionality expertise
Content/functionality experts or novices or both
13. Define the Central Message A computer game job? or A bank job?
14. Borrow from the “Best of the Web” and “Best App Design” Surf and use …
Look at award winners
Borrow ideas, designs, forms
15. How to most effectively get my message across? … and keep voluntary users coming back? Design to your audience
Change content & format only as needed
Give feedback on use
Be interesting and interactive
16. Building the Screen or Web Page Create logical information groupings
Group ‘chunks’ by principal of proximity
Compose text for each ‘chunk’
17. Chunk information (information objects)
18. Compose text using The principle of clarity
19. Analyze text If text on a single subject > 2 pages –
Create a menu of topics & sub-topics
Create multiple web pages from the text
20. Generate Stable Features
21. Generate Screen(s) Iteratively design functional information in information object groupings
Design all information about a single function at the same time
If more than one screen is necessary for a single function, consider scrolling vs. paging
The fewer clicks, scrolls, screens, the better
22. Test for Effect/Affect Effectiveness -- the content of pages is accurate, complete and convey the message intended.
Affectiveness -- the emotional reaction to pages.
An affective presentation engages viewer attention by being interesting and by matching the emotion evoked to the message.
7 second rule
23. Add Interest Pictures
Color/Size
Text
Background
Adornments
24. TEST With ‘live’ users for
Functionality
Work pace
Work style
‘Intelligence’
25. REVISE then, program…