Welcome to %1$s. Please log in.

Login with username, password and session length
 
News: Keep The TechnoWorldInc.com Community Clean: Read Guidelines Here.
Techno World Inc - The Best Technical Encyclopedia Online! | Forum | THE TECHNO CLUB [ TECHNOWORLDINC.COM ] | Computer / Technical Issues | Web Design / Graphics Design/ Animation | Effective Web Design Usability Principles

Daniel Franklin

Effective Web Design Usability Principles


Website Design Usability Tips

1. Getting to know about audience members

You want a site that has personality and quality content based on your audience taste. You have to understand their color preferences, technical skills and any prevalence of special needs.

2. Make the interface simple and obvious

The more obvious the interface is, the less frustration the site visitor has to guess about how your site works. You want the audience to concentrate on the content, not the interface.

3. Readability

Make paragraph easy to read. Don't use small text for font size.

4. Make your page fast loading

Reduce the waiting time is a must if your page over 20KB.

5. Avoid hidden (rollover to reveal) navigation

It makes for a very clean design if all your navigation is hidden, but it may also mean that people won't know where to click to go somewhere.

6. Get user feedback

Find out what works and what doesn't.

7. Study site visitor performance

How long does it take to performance a given task? The time it takes to do thing has got to be reasonable. If it's not reasonable, improve user interaction wherever possible.

8. Help section (site map, 404)

When site visitors make a mistake try to provide many ways to help them out of it.

9. Test early and test often

Test your code for bugs on web browsers. Test the interface for usability. Ask your friends and colleagues for in depth and valuable feedback.

Please don't think that the website usability techniques discussed above are the be all and end all of web usability as they are not.

Sam H Mah is a search engine optimization website designer who provides web standard compliant website for small and corporate clients around Canada and the world. Request a FREE usability / SEO website critique.

Recent Updates

[August 11, 2025, 08:33:44 AM]

[August 11, 2025, 08:33:44 AM]

[August 11, 2025, 08:33:44 AM]

[August 11, 2025, 08:33:44 AM]

[May 13, 2025, 08:34:25 AM]

[May 13, 2025, 08:34:25 AM]

[May 13, 2025, 08:34:25 AM]

[April 12, 2025, 08:24:20 AM]

[April 12, 2025, 08:24:20 AM]

[April 12, 2025, 08:24:20 AM]

[April 12, 2025, 08:24:20 AM]

[March 12, 2025, 09:35:30 AM]

[March 12, 2025, 09:35:30 AM]

Subscriptions

<style>@import url('https://fonts.googleapis.com/css?family=Montserrat:700');@import url('https://fonts.googleapis.com/css?family=Montserrat:400'); .form-preview { display: flex; flex-direction: column; justify-content: center; margin-top: 30px; padding: clamp(17px, 5%, 40px) clamp(17px, 7%, 50px); max-width: none; border-radius: 6px; box-shadow: 0 5px 25px rgba(34, 60, 47, 0.25); } .form-preview, .form-preview *{ box-sizing: border-box; } .form-preview .preview-heading { width: 100%; } .form-preview .preview-heading h5{ margin-top: 0; margin-bottom: 0; } .form-preview .preview-input-field { margin-top: 20px; width: 100%; } .form-preview .preview-input-field input { width: 100%; height: 40px; border-radius: 6px; border: 2px solid #e9e8e8; background-color: #fff; outline: none; } .form-preview .preview-input-field input { color: #000000; font-family: "Montserrat"; font-size: 14px; font-weight: 400; line-height: 20px; text-align: center; } .form-preview .preview-input-field input::placeholder { color: #000000; opacity: 1; } .form-preview .preview-input-field input:-ms-input-placeholder { color: #000000; } .form-preview .preview-input-field input::-ms-input-placeholder { color: #000000; } .form-preview .preview-submit-button { margin-top: 10px; width: 100%; } .form-preview .preview-submit-button button { width: 100%; height: 40px; border: 0; border-radius: 6px; line-height: 0px; } .form-preview .preview-submit-button button:hover { cursor: pointer; } </style><form data-v-3a89cb67="" action="https://api.follow.it/subscription-form/QUJrWmZTYXZTNTJ5UDdYb2NaeVlQMmdRWTNQenUrdHdueldtWTNVOGk4WVJhVm94L280bzRPbFE1bVcwNDZ1UWJ4T0VFb0FETWJ4QjhhNGo3ekhGVXNRVmhkbXNnUDlZVkh6RWdmWWlveVVvWDZwbVNCcmpGZUVjMTBNN09WREN8dW1lOTY5VVhCNUtYZTJRdGRZV3ZSQWpaWVVpdGtqbjdNTC9HT2RlMndiaz0=/8" method="post"><div data-v-3a89cb67="" class="form-preview" style="background-color: rgb(255, 255, 255); border-style: solid; border-width: 1px; border-color: rgb(204, 204, 204); position: relative;"><div data-v-3a89cb67="" class="preview-heading"><h5 data-v-3a89cb67="" style="text-transform: none !important; font-family: Montserrat; font-weight: bold; color: rgb(0, 0, 0); font-size: 16px; text-align: center;">Get Latest Tech Updates For Free!</h5></div> <div data-v-3a89cb67="" class="preview-input-field"><input data-v-3a89cb67="" type="email" name="email" required="required" placeholder="Enter email" spellcheck="false" style="text-transform: none !important; font-family: Montserrat; font-weight: normal; color: rgb(0, 0, 0); font-size: 14px; text-align: center; background-color: rgb(255, 255, 255);"></div> <div data-v-3a89cb67="" class="preview-submit-button"><button data-v-3a89cb67="" type="submit" style="text-transform: none !important; font-family: Montserrat; font-weight: bold; color: rgb(255, 255, 255); font-size: 16px; text-align: center; background-color: rgb(96, 131, 190);">Subscribe</button></div></div></form>

Resources

  

Effective Web Design Usability Principles

Started by Daniel Franklin, September 15, 2007, 04:07:30 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

  Print     Print       Print