Web Design CIS 376 Bruce R Maxim UM Dearborn 01 14 19 1 WebApp Design Goals Simplicity Consistency Identity Robustness Navigability Visual appeal Compatibility 01 14 19 2 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 01 14 19 3 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 01 14 19 4 User Concerns Where am I 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 01 14 19 5 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 01 14 19 6 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 01 14 19 7 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 01 14 19 8 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 01 14 19 9 Aesthetic Design Graphic Design Layout Color schemes Text fonts sizes and styles Use of multimedia elements audio video animation etc 01 14 19 10 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 01 14 19 11 WebApp Architectural Structures Linear structures Grid structures Hierarchical structures Networked or pure web structures 01 14 19 12 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 01 14 19 13 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 01 14 19 14 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 01 14 19 15 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 01 14 19 16 Web Quality Usability Functionality Reliability Efficiency Maintainability Security Availability Scalability Time to market 01 14 19 17 Web Quality Visible to Users Volatility of content Content cohesiveness Working links Content matches user expectations Accuracy and consistency Response time and latency Performance 01 14 19 18 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 01 14 19 19 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 01 14 19 20 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 01 14 19 21 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 01 14 19 22 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 01 14 19 23