web interface design
DESCRIPTION
Web Interface Design. Dawn Pedersen American 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. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Web Interface Design](https://reader035.vdocument.in/reader035/viewer/2022062301/5681613f550346895dd0a92f/html5/thumbnails/1.jpg)
Web Interface DesignDawn Pedersen
American River College
![Page 2: Web Interface Design](https://reader035.vdocument.in/reader035/viewer/2022062301/5681613f550346895dd0a92f/html5/thumbnails/2.jpg)
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.
![Page 3: Web Interface Design](https://reader035.vdocument.in/reader035/viewer/2022062301/5681613f550346895dd0a92f/html5/thumbnails/3.jpg)
Sample of Software Interfaces
AdobePhotoshop
WindowsExplorer
Firefox
MicrosoftWord
![Page 4: Web Interface Design](https://reader035.vdocument.in/reader035/viewer/2022062301/5681613f550346895dd0a92f/html5/thumbnails/4.jpg)
Web InterfacesWeb interfaces allow a user to interact with a
website.The simplest web interfaces provide
information and allow the user to click between site pages.
![Page 5: Web Interface Design](https://reader035.vdocument.in/reader035/viewer/2022062301/5681613f550346895dd0a92f/html5/thumbnails/5.jpg)
Web InterfacesMore 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.
![Page 6: Web Interface Design](https://reader035.vdocument.in/reader035/viewer/2022062301/5681613f550346895dd0a92f/html5/thumbnails/6.jpg)
Web InterfacesAccept and execute user commands.
![Page 7: Web Interface Design](https://reader035.vdocument.in/reader035/viewer/2022062301/5681613f550346895dd0a92f/html5/thumbnails/7.jpg)
Web InterfacesProvide feedback to the user.
![Page 8: Web Interface Design](https://reader035.vdocument.in/reader035/viewer/2022062301/5681613f550346895dd0a92f/html5/thumbnails/8.jpg)
Web InterfacesAllow users to rearrange interface elements.
![Page 9: Web Interface Design](https://reader035.vdocument.in/reader035/viewer/2022062301/5681613f550346895dd0a92f/html5/thumbnails/9.jpg)
Web InterfacesCan update
instantaneously.
![Page 10: Web Interface Design](https://reader035.vdocument.in/reader035/viewer/2022062301/5681613f550346895dd0a92f/html5/thumbnails/10.jpg)
Web UsabilityWeb 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.
![Page 11: Web Interface Design](https://reader035.vdocument.in/reader035/viewer/2022062301/5681613f550346895dd0a92f/html5/thumbnails/11.jpg)
Web UsabilityThe 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.
![Page 12: Web Interface Design](https://reader035.vdocument.in/reader035/viewer/2022062301/5681613f550346895dd0a92f/html5/thumbnails/12.jpg)
Web UsabilityCreate a clear visual hierarchy.
![Page 13: Web Interface Design](https://reader035.vdocument.in/reader035/viewer/2022062301/5681613f550346895dd0a92f/html5/thumbnails/13.jpg)
Web UsabilityBreak up pages into clearly defined areas. Make it obvious what's clickable.
![Page 14: Web Interface Design](https://reader035.vdocument.in/reader035/viewer/2022062301/5681613f550346895dd0a92f/html5/thumbnails/14.jpg)
Web UsabilityKeep visual noise to a minimum. Omit needless words.
![Page 15: Web Interface Design](https://reader035.vdocument.in/reader035/viewer/2022062301/5681613f550346895dd0a92f/html5/thumbnails/15.jpg)
Web UsabilityCreate 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?
![Page 16: Web Interface Design](https://reader035.vdocument.in/reader035/viewer/2022062301/5681613f550346895dd0a92f/html5/thumbnails/16.jpg)
Web UsabilityYour 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?
![Page 17: Web Interface Design](https://reader035.vdocument.in/reader035/viewer/2022062301/5681613f550346895dd0a92f/html5/thumbnails/17.jpg)
Web UsabilityNothing beats a good tagline. Don't design for a mythical "average user."
Test your site with real, ordinary people.