1. CIS 376 Bruce R. Maxim UM-Dearborn
Web Design
CIS 376
Bruce R. Maxim
UM-Dearborn
4/11/2019

2. WebApp Design Goals Simplicity Consistency Identity Robustness
Navigability
Visual appeal
Compatibility
4/11/2019

3. WebE Design Activiites
Interface design
describes structure and organization of the user interface (screen layout, interaction modes, and navigation mechanisms)
Aesthetic design
look and feel of WebApp (graphic design)
Content design
defines layout, structure, and outline for all WebApp content and content object relationships
4/11/2019

4. WebE Design Activiites
Navigation design
navigational flow between content objects
Architectural design
hypermedia structure of WebApp
Component design
develops processing logic required to implement the WebApp functional components
4/11/2019

5. User Concerns Where am I? What can I do now?
Interface should indicate which WebApp is running
Interface should indicate user’s location in content hierarchy
What can I do now?
Interface helps user understand current options (live link and relevant content)
Where have I been and where am I going?
Provide user with map showing paths through the WebApp
4/11/2019

6. WebApp Interface Concerns
Minor server errors are likely to cause user to leave WebApp and look for an alternative site
Reading speed on monitor is about 25% slower than for hardcopy
Avoid "under construction" signs
Users prefer not having to scroll to read content
Navigation menus and headers should be designed consistently and be available on all pages available to the user
4/11/2019

7. WebApp Interface Concerns
Do not rely on browser functions to assist in navigation
Aesthetics should never take precedence over application functionality
Navigation should be obvious to causal users
4/11/2019

8. Interface Design Tasks
Review and refine analysis information
Develop rough sketch of WebApp interface layout
Map user objectives into specific interface actions
Define set of user tasks associated with each action
Storyboard screen images for each interface action.
Refine interface layouts and storyboards using input from aesthetic design.
4/11/2019

9. Interface Design Tasks
Identify user interface objects required to implement user interface.
Develop procedural representation of user’s interaction with the interface.
Develop a behavioral representation of user’s interaction with the interface.
Describe interface layout for each state.
Review and refine the interface model (focus on usability).
4/11/2019

10. Aesthetic Design:Graphic Design
Layout
Color schemes
Text fonts, sizes, and styles
Use of multimedia elements (audio, video, animation, etc.)
4/11/2019

11. Content Design
Representations for content objects and their relationships (Web engineers)
Analysis content objects modeled by UML associations and aggregations
Representation of information within specific content objects (content authors)
As content objects are designed they are “chunked” to form pages (based in user needs and content relationships)
Aesthetic design may be applied to get the proper look and feel for the information
4/11/2019

12. WebApp Architectural Structures
Linear structures
Grid structures
Hierarchical structures
Networked or "pure" web structures
4/11/2019

13. WebE Design Patterns: part 1
Cycle
user is returned to previously visited node
Web Ring
implements a grand cycle that links entire hypertext into a tour of a subject)
Contour
for interconnected cycles, allowa navigation across paths defined by cycles
Counterpoint
hypertext commentary used to interrupt content to provide additional information
4/11/2019

14. WebE Design Patterns: part 2
Mirrorworld
content presented using several threads, each with its own perspective or point of view
Sieve
user guided through a series of decisions to specific content
Neighborhood
uniform navigation is provided to user regardless of position within the WebApp
4/11/2019

15. Navigational Design
Identify the semantics of navigation for different users based on
perceived roles (i.e. visitor, registered customer, or privileged user)
goals associated with these roles.
Define the mechanics (syntax) of achieving navigation
4/11/2019

16. Navigation Syntax
Individual navigation link – text-based links, icon, buttons, switches, and geographical metaphors
Horizontal navigation bar – lists major content or functional categories in a bar with links
Vertical navigation column
Lists major content or functional categories
Lists every major content object in WebApp
Tabs – variation of navigation bar or columns
Site map – provides all inclusive table of contents to all WebApp content objects and functionality
4/11/2019

17. Web Quality Usability Functionality Reliability Efficiency
Maintainability
Security
Availability
Scalability
Time-to-market
4/11/2019

18. Web Quality Visible to Users
Volatility of content
Content cohesiveness
Working links
Content matches user expectations
Accuracy and consistency
Response time and latency
Performance
4/11/2019

19. Assessing Web Quality
Can the scope and depth of the web content be determined to ensure that it meets user needs?
Can background and authority of content’s authors be easily identified?
Is possible to determine content currency and date of last update?
Is content location stable (e.g. URL stays the same)?
4/11/2019

20. Assessing Web Quality Is the content credible? Is the content unique?
Is the content valuable to users?
Is the content well organized and easily accessible?
4/11/2019

21. WebApp Quality Assessment
Is the WebApp interface usable?
Are the aesthetics of the WebApp pleasing to the user and appropriate for the information domain?
Is the content designed to impart the most information for the least amount of effort?
Is navigation efficient and straightforward?
4/11/2019

22. WebApp Quality Assessment
Has the WebApp architecture been designed to accommodate special goals and objectives of users, content structure, functionality, and effective navigation flow?
Are the WebApp components designed to reduce procedural complexity and enhance correctness, reliability, and performance?
4/11/2019

23. Aesthetic Design: Layout Issues
Use white space generously
Emphasize content
Organize elements from top-left to bottom-right
Group navigation, content, and function geographically within page\
Avoid temptation to use scroll bars
Take differing resolutions and browser window sizes into account during design
4/11/2019