Web Interface Design Dawn PedersenAmerican River College
What’s an Interface? • The connection between a user and a machine. • Interfaces provide complex information in a usable format. • Interfaces accept and execute commands from a user. • Interfaces give feedback to a user.
Sample of Software Interfaces AdobePhotoshop Firefox WindowsExplorer MicrosoftWord
Web Interfaces • Web interfaces allow a user to interact with a website. • The simplest web interfaces provide information and allow the user to click between site pages.
Web Interfaces • More complex web interfaces act more like software interfaces: • Accept and execute user commands. • Provide feedback to the user. • Allow users to rearrange interface elements. • Can update instantaneously.
Web Interfaces • Accept and execute user commands.
Web Interfaces • Provide feedback to the user.
Web Interfaces • Allow users to rearrange interface elements.
Web Interfaces • Can update instantaneously.
Web Usability • Web designers need to consider the needs of users when designing a web interface. • Usability refers to the degree to which a user can quickly and confidently navigate a website. • Usability is typically the number one factor influencing whether someone will stay on your site or go elsewhere for what they want or need.
Web Usability The following is a summarized list of tips for making web sites usable. They come from the legendary book about web design usability, "Don't Make Me Think" by Steve Krug. • Don't make your visitors have to think. A web page should be self-evident, obvious, self-explanatory. • Recognize that visitors don't read pages. They scan them, and they muddle through. • Create a clear visual hierarchy.
Web Usability • Create a clear visual hierarchy.
Web Usability • Break up pages into clearly defined areas. • Make it obvious what's clickable.
Web Usability • Keep visual noise to a minimum. • Omit needless words.
Web Usability • Create street signs and breadcrumbs in your navigation. On any page, a visitor should be able to answer these questions: • What site is this? • What page am I on? • What are the major sections of the site? • What are my options at this level? • Where am I in the scheme of things? • How can I search?
Web Usability • Your home page must convey "the big picture" for your visitors: • What is this? • What do they have here? • What can I do here? • Why should I be here-and not somewhere else? • Where do I start?
Web Usability • Nothing beats a good tagline. • Don't design for a mythical "average user." Test your site with real, ordinary people.