The document provides guidance on developing an effective website structure. It recommends beginning by identifying the target audience and defining the site's purpose. The main types of website structures discussed are linear narrative, hierarchy, and web formats. It also emphasizes the importance of organization, consistent navigation, dividing content into digestible chunks, and ensuring all links work properly. The document concludes by highlighting common mistakes like failing to keep the site updated and not completing construction before posting.
Presentation to:
Madison Web Design & Development Meetup - February 11, 2013.
Web Content Mavens, Washington, DC - January 8, 2013.
NYC Web Design Meetup -January 24, 2013.
Presentation by Clarissa Peterson for LVL Studio's UX Soiree, November 21, 2012, in Montreal, Quebec. Overview of responsive design with focus on user experience.
Presentation to:
Madison Web Design & Development Meetup - February 11, 2013.
Web Content Mavens, Washington, DC - January 8, 2013.
NYC Web Design Meetup -January 24, 2013.
Presentation by Clarissa Peterson for LVL Studio's UX Soiree, November 21, 2012, in Montreal, Quebec. Overview of responsive design with focus on user experience.
For many web developers whose jobs don't allow them to play with all the newest technologies, something like responsive design can be just out of reach. As more users are surfing exclusively on mobile devices, these are skills every web developer, designer, and manager needs to develop. We'll walk through the background, assorted techniques, how to measure success, and where it's all going. This is not a coding session, but a planning and strategy session.
Breakout session from Illinois Webcon 2019
How do you create an effective and engaging marketing experience for prospective students, while still keeping current students, staff, parents, and alumni happy? And how do you do this while making your website clean, coherent, and simple to both manage and navigate?
In this presentation, we will dive into examples from past clients to see how refreshing (or entirely restructuring!) your sitemap and creating a sitemap-based navigation scheme can improve your user's experience and maintain your website's longevity.
You will learn:
- Best practices for structuring your website's architecture, whether you have a lot or a little time to spend
- Sound principles for directing users around your website, including traditional navigation schemes and navigating via page content
- How to help all kinds of audiences find what they need, when they need it, without sacrificing a coherent site structure
Online Presentation for the TESOL EVO09 workshop "Multiliteracies for Social Networking and Collaborative Learning Environments" on Jan 22, 2009 at 11 am GMT.
Covers frameworks, navigation patterns, preprocessors, responsive images, responsive data tables, polyfills. Presentation at the Cleveland Web Standards Association, October 30, 2012.
Martin Bazley - using simple technologies with different audiences (reduced f...Martin Bazley
Slides used in Martin Bazley's presentation at the GEM Freelance Network day at the Foundling Museum on 7 April 2011. Handouts and more info available from info@martinbazley.com
A talk members of the Forum One Communications UX team gave at UXCampDC 2013. The focus was on some pain points we hit while trying to wrap our brains around Responsive Design and the tool we've made to help sketch solutions more easily and quickly.
A hands-on workshop for DC Web Women on August 14, 2012.
Read more about the workshop and a summary of what we talked about on my blog: http://www.clarissapeterson.com/2012/08/responsive-web-design/
Responsive Web Design, as laid out by Ethan Marcotte, is about a whole lot more than just media queries. I look at the three elements of responsive web design, statistics about mobile web browsing, and offer tips on how to best design sites for responsiveness.
N.B.: Several slides are lifted wholesale from Bryan Rieger's excellent "Rethinking the Mobile Web" presentation, be sure to check it out!
For many web developers whose jobs don't allow them to play with all the newest technologies, something like responsive design can be just out of reach. As more users are surfing exclusively on mobile devices, these are skills every web developer, designer, and manager needs to develop. We'll walk through the background, assorted techniques, how to measure success, and where it's all going. This is not a coding session, but a planning and strategy session.
Breakout session from Illinois Webcon 2019
How do you create an effective and engaging marketing experience for prospective students, while still keeping current students, staff, parents, and alumni happy? And how do you do this while making your website clean, coherent, and simple to both manage and navigate?
In this presentation, we will dive into examples from past clients to see how refreshing (or entirely restructuring!) your sitemap and creating a sitemap-based navigation scheme can improve your user's experience and maintain your website's longevity.
You will learn:
- Best practices for structuring your website's architecture, whether you have a lot or a little time to spend
- Sound principles for directing users around your website, including traditional navigation schemes and navigating via page content
- How to help all kinds of audiences find what they need, when they need it, without sacrificing a coherent site structure
Online Presentation for the TESOL EVO09 workshop "Multiliteracies for Social Networking and Collaborative Learning Environments" on Jan 22, 2009 at 11 am GMT.
Covers frameworks, navigation patterns, preprocessors, responsive images, responsive data tables, polyfills. Presentation at the Cleveland Web Standards Association, October 30, 2012.
Martin Bazley - using simple technologies with different audiences (reduced f...Martin Bazley
Slides used in Martin Bazley's presentation at the GEM Freelance Network day at the Foundling Museum on 7 April 2011. Handouts and more info available from info@martinbazley.com
A talk members of the Forum One Communications UX team gave at UXCampDC 2013. The focus was on some pain points we hit while trying to wrap our brains around Responsive Design and the tool we've made to help sketch solutions more easily and quickly.
A hands-on workshop for DC Web Women on August 14, 2012.
Read more about the workshop and a summary of what we talked about on my blog: http://www.clarissapeterson.com/2012/08/responsive-web-design/
Responsive Web Design, as laid out by Ethan Marcotte, is about a whole lot more than just media queries. I look at the three elements of responsive web design, statistics about mobile web browsing, and offer tips on how to best design sites for responsiveness.
N.B.: Several slides are lifted wholesale from Bryan Rieger's excellent "Rethinking the Mobile Web" presentation, be sure to check it out!
Website usability ideas for business growthJames Smith
Website usability is about creating your website in such a manner that your website visitors can find what they're looking for quickly and easily. A usable website can bring in huge benefits on to your website and your business.
1 : https://www.eeoc.gov/eeoc/newsroom/release/10-7-19.cfm
2 : https://www.eeoc.gov/eeoc/newsroom/release/11-29-17c.cfm
3: https://www.eeoc.gov/eeoc/newsroom/release/10-2-19b.cfm
4: https://www.eeoc.gov/eeoc/newsroom/release/12-5-19a.cfm
5: https://www.eeoc.gov/eeoc/newsroom/release/10-22-19.cfm
6: https://www.eeoc.gov/eeoc/newsroom/release/10-2-18c.cfm
7: https://www.eeoc.gov/eeoc/newsroom/release/12-30-19.cfm
8: https://www.eeoc.gov/eeoc/newsroom/release/11-19-18.cfm
9: https://www.eeoc.gov/eeoc/newsroom/release/10-25-16.cfm
Usability Test Template
1. Create a document with the following areas. You will use your document during the usability test next week.
2. Goal of the site:
Explain the goal of your site in 2-3 sentences.
3. User testing detail:
Name, phone, age, employment, special interests, and any other items you are interested in.
4. Pre-test questions:
Create three questions to ask your tester prior to the test. These questions should be aimed to gather information regarding your test as a potential user of the site.
5. Test tasks and schedule
· Write a series of steps for the user to follow in using your site. At a minimum the user should be able to navigate the site, check out the specials and subscribe to the newsletter.
· Attempt to gain information regarding how the user feels about the site.
· Use the “Talk Aloud” method of gaining user feedback.
6. Post-test debrief:
Come up with 3 questions to ask the user regarding their input about the site
7. Usability Scale
Use these items to rate your test’s feeling about the site. You may use the items as questions in the post-test debrief.
· Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design?
· Efficiency: Once users have learned the design, how quickly can they perform tasks?
· Memorability: When users return to the design after a period of not using it, how easily can they reestablish proficiency?
· Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors?
· Satisfaction: How pleasant is it to use the design?
Design Principles
Some content from:
The Principles of Beautiful Web Design
(Jason Beaird and James George)
Principles of Web Design
(Joel Sklar)
1
Learning Outcomes
apply user-centred design principles and methods
understand and be able to follow a suitable design process
appreciate the design principles that make a “good” website
be able to apply these principles at a basic level
2
Design Process
somewhere between art, science, and problem solving
the process of creating a design comp
can be boiled down to:
discovery
exploration
implementation
3
What's a comp?
the word comp is an abbreviation of the phrase “comprehensive dummy” –
a term that comes from the print design world.
complete simulation of a printed layout created before the layout goes to press.
in Web design, a comp is an image of a layout that’s created before we ...
Stuff what we're doing at Edge Hill UniversityMichael Nolan
Presentation from 22nd July workshop session at Institutional Web Management Workshop 2008. Skip to slide 41 for my BarCamp session "10ish five-minute ways to improve your website".
Users of web documents don’t just look at information, they interact with it in novel ways that have no precedents in paper document design; therefore, web designers must be versed in the art and science of interface design. The graphic user interface (gui) of a computer system comprises the interaction metaphors, images, and concepts used to convey function and meaning on the computer screen. It also includes the detailed visual characteristics of every component of the graphic interface and the functional sequence of interactions over time that produce the characteristic look and feel of web pages.
Source: WebStyle Guide, 3rd Edition: http://webstyleguide.com/wsg3/4-interface-design/index.html
Web accessibility refers to the inclusive design and development of websites and web content to ensure that people with disabilities can access and interact with them effectively. It involves considering and implementing features and practices that enable individuals with various disabilities to navigate, perceive, understand, and interact with web content, ensuring equal access and usability for all users!
What is website How to create a professional site and which tools is required for creating site or blog and also how to identifies the real web page and the bogus or fake web pages on the site...................................................................................
1. Web Construction – Where Do You Begin?
mcollins@rcs.k12.va.us
Hit your Target
Who do you want to attract to your site? Students? Teachers? Parents? Consumers?
Knowledge of who your visitors will be can help you determine the focus of your site.
Sites are generally designed for:
Content (education, reference)
Communication (list serv’s, chat rooms, bulletin boards)
Commerce
Decide what you want to say and what others need to know. A web’s purpose should be concise
and pre-determined. As a designer, the first task you should undertake is to write down your
site’s purpose in 20 words or less.
Structure, Structure, Structure
Building it isn’t enough – you need to make your site consistently easy to navigate. Poor
organization is one of the factors that keep “surfers” from re-visiting your site. While the type
and volume of information can influence the structure that you create, you will more than likely
choose one of four basic structures.
Linear Narrative: A linear narrative is a very effective technique for presenting simple
information. This method is generally used with smaller sites for the purpose of
displaying basic content or providing training.
Example: http://community-2.webtv.net/C8720277/ChandlersDaylilies/
Hierarchy: One of the best ways to organize complex bodies of information. This
format lends itself to web design because web sites are generally organized as offshoots
of a single “home” page. As many people are familiar with this type of “flow-chart”
structure in other applications, a well-designed hierarchy is easy for users to navigate. It
should be noted, however, that hierarchies only work well when the designer has
thoroughly organized his/her material.
Web: This model poses very few restrictions and allows surfers to explore the site as it
appeals to their own unique interests. These sites are generally dense with both relative
2. and absolute hyperlinks. These webs target highly educated or experienced surfers, and
can be confusing to novice surfers.
It is good practice for Web Designers to create a “model” of their site long before they ever
open the first HTML editor. Flow charts, index cards and sticky notes are among a
designer’s most useful tools!
Tips for the New Designer:
Prioritize information from general to specific.
Divide your information into small, digestible chunks. Most users opt to print sites with
pages of text rather than take the time to read the information online.
o Small chunks of related information are easier to categorize and “funnel” into a
consistent organizational scheme.
o Link your “chunks” to one another if the related information is approximately one
to three pages.
o We HATE to scroll! Keep your information clean and concise. Long web pages
tend to be disorienting.
http://web.archive.org/web/*/http://oasis.leidenuniv.nl/general/index-search/searchrs.htm
A uniform format for presenting your information allows a surfer to apply his past
experience with your site to predict how an unfamiliar section will be organized.
o Familiarity breeds comfort!
o Surfers who feel comfortable in a web environment are more likely to return to it
– and bring their friends!
o Disorganization = surfer frustration.
http://www.rcs.k12.va.us/
Proper web site “balance” is the key to a successful design.
o Hierarchy should feel natural to the visitor.
o Main Menus that are too “deep” will lose visitors – having to navigate through
many layers of nested menus before finding what you need is unnecessary.
o Menus lose their value if they don’t carry at least four or five links.
How well do you connect?
Once you have determined the general structure of your site, it’s important to decide how
your visitors will travel through it. Placement and type of hyperlinks can make or break your
web site.
3. Links
Text
o Most sites use text for both relative and absolute hyperlinks.
o Text should sharply contrast page background. http://www.geocities.com/Athens/
Aegean/2221/index.html
o Text and font should be consistent.
o http://www.nicemice.net/amc/soapbox/html-abuse/fonts.var font abuse should be
a crime…
Graphics
o Graphics are easy to hyperlink but must transcend language.
“Next page” “Previous Page”
o These links are useful in linear sites. They minimize viewer choice and offer the
site designer some measure of navigation control.
Navigation Bars
o Offer consistency between pages
o Allow for a clean, professional look
http://www.superkids.com/aweb/tools/math/index.shtml
Link Placement
o Links that are scattered throughout a page give the reader a sense of dis-
organization. http://www.python.org/~guido/
o Absolute links (those that link away from you site) should be placed strategically.
Absolute links from the “home” page may take visitors from your site
before they ever view your information.
Make sure they work!
o Nothing discourages web site use like broken links.
o Four out of ten pages on a site have a broken link.
http://web.archive.org/web/20040607183322/www.frickell.com/oldancient/links.htm
There’s No Place Like Home….
All web sites are organized around a “home” page. This page is the entry point of your site and
requires a great deal of consideration.
First Impressions: Like it or not, your home page is the face you show the world. Take
the time to make a good impression.
o Eye appeal is critical. http://www.personal.psu.edu/staff/k/j/kjr106/index.html
o Take the time to notice spelling and grammar.
o Like it or not, 6 inches is all you can count on.
http://web.archive.org/web/*/http://www.geocities.com/Heartland/Hills/2710/Gui
neaPig.html
o 10 second download or they’re gone.
o Design to the lowest common denominator:
800 x 600
4. View in different/older versions of a browser before publishing
Your home page should be the first one you develop and the last one you finish.
Common Mistakes
Stay Current
In this day and age, information changes faster than a speeding bullet. Successful web sites
are frequently updated and their designers make an effort to draw the surfer’s attention to
new features.
o Timestamps
o “What’s New” Page
o Use “new” graphics sparingly – too much of a good thing is a bad thing!
Complete Construction Before Posting
A site that has ‘under construction” postings on every link from the home page is a site that
was posted in a rush.
Guarantee They’ll leave without a trace
o Long down-loads
o Broken Links
o Graphics that don’t work
o Loud pages http://www3.ns.sympatico.ca/dstredulinsky/home.html
o Spelling errors
o An emphasis on ANYTHING but content. http://vervex.blix.com/ads.html
Good web sites are like gardens; they are always a work in progress.
References
(1999) Building a Better Site. Web Site Journal [Internet] June 2, 1999, Vol. 2, No.22. Available
from: http://www.WebSiteJournal.com
(1999) Point Your Visitors In The Right Direction. Web Site Journal [Internet] June 2, 1999,
Vol. 2, No.22. Available from: http://www.WebSiteJournal.com
(1999) Are Your Links in Synch? Web Site Journal [Internet] June 2, 1999, Vol. 2, No.22.
Available from: http://www.WebSiteJournal.com
Lynch and Horton (1997) Yale Style Manual [Internet] January 31,2001.
Available from: < http://info.med.yale.edu/caim/manual/contents.html>