1 / 23

Web Design

Web Design. CIS 376 Bruce R. Maxim UM-Dearborn. WebApp Design Goals. Simplicity Consistency Identity Robustness Navigability Visual appeal Compatibility. WebE Design Activiites. Interface design

inocencia
Download Presentation

Web Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Design CIS 376 Bruce R. Maxim UM-Dearborn

  2. WebApp Design Goals • Simplicity • Consistency • Identity • Robustness • Navigability • Visual appeal • Compatibility

  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. 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

  5. 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

  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

  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

  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.

  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).

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

  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

  12. WebApp Architectural Structures • Linear structures • Grid structures • Hierarchical structures • Networked or "pure" web structures

  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

  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

  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

  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

  17. Web Quality • Usability • Functionality • Reliability • Efficiency • Maintainability • Security • Availability • Scalability • Time-to-market

  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

  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)?

  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?

  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?

  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?

  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

More Related