Web Design Graphical User Interface Navigation

Website Prototyping Plan your website Take time to plan the goal And outcome for your site Based on target audience Take time to plan your user’s experience Graphical User Interface (GUI) Web design is all about interaction Clicks Scroll Search Watch/listen/sign-up/buy Read/write/respond

The User Experience User Interface Design Make sure they know where they are Make sure they get what they want from your site Information Architecture Site map (flowchart) Structure to provide user with best access to information Must be effective for user

User-centered Design Process -1 Top priority is to meet the needs of the user Stages of the planning process: Define goals and strategy Why does this site exist Research Research the target audience And what the user expects from the site Create user scenarios Information architecture Flowchart or site map

Flowchart or Site Map

User-centered Design Process -2 Sketching Organize content and site navigation Post-it notes Wide Site Structure All navigation shows (good for small sites) User can easily jump to any main page with 1 click Deep Site Structure Offers only a few main navigation options More secondary links Topics are grouped and categorized together

Wireframe the Layout of Each Page Typically black and white sketches with placeholders for all elements Includes: navigation, graphics and content

User-centered Design Process -3 Mockups Typically these are created after a wireframe Used to explore the visual development of the site Layout Color scheme (color family) Graphics Headers Logos Navigation Menus Buttons Imagery Content

Full Page Layout- Mockup

Main Page Components

Header with Navigation Logo and Header Navigation Bar

Left Navigation Bar and Content Area 180 px width 50 px height

Prototypes and User Testing Rapid development of a site to demonstrate interactivity It’s impossible to use only print prototypes to fully demonstrate user interaction A user needs to use a site to experience its interaction Be willing to revise It’s unlikely you will get all aspects of the site and the interaction correct on your first attempt Critiques from your team members are useful for improving websites. Critiques are commonplace in the arts. User testing is essential Usability testing is an important task Test the user’s ability to find information without confusion

Model Site Home page and 2 sub-level pages Header and page layout is unique on the home page The two sub-level pages have the same layout Navigation appears on top and bottom of page Project navigation is suggested to appear on the left side Rollover buttons should be active for the current page Color theme appears in header text Button text and rollover button text colors Graphic bars designate specific areas of page Placeholder images and text create a fully prototyped page

Site Organization Main site folder.html files images folder