How to be different?
•
0 j'aime•1,155 vues
Some tips to make web application interface special.
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (17)
En vedette
Similaire à How to be different?
Similaire à How to be different? (20)
Plus de Saeid Zebardast
Dernier
Dernier (20)
How to be different?
- 1. How to be different? Some tips to make web application interface special Saeid Zebardast http://zebardast.ir saeid@zebardast.ir
- 3. Cross-browser • Pros • Consistent, stable browser rendering and functionality • Ease of using/viewing for end-users • Higher quality website
- 4. Cross-browser • Cons • Developing Time • Testing Time • Per Browser • Per Platform
- 5. Vector Graphics • Easy to create/edit • Resolution Independent • Reducing HTTP Request • Styling And Scripting • Can Be Animated And Edited • Smaller File Size
- 7. Responsive Web Design • Sample websites • http://foodsense.is/ • http://www.smashingmagazine.com/ • http://www.fork-cms.com/ • http://webdesignerwall.com/
- 9. Designing Forms • Minimize the pain • No one likes filling in forms • Inline validation • Layout • Label positioning • Form labels work best above the field • Content groupings • a structured way to organize a form • a way to scan information required at a high level • a sense of how information within a form is related
- 10. Designing Forms • Help & Tips • Asking for unfamiliar data • Users may question why data is being requested • There are recommended ways of providing data • Certain data requests are optional • Note: Help & Tips can quickly overwhelm a form if overused. • When lots of unfamiliar data is being requested, consider using a dynamic help system • Ensure consistent communication • Errors, Help, Success
- 11. Designing Forms • Try to avoid optional fields • Indicate required fields • If most fields are required, indicate optional fields • Text is best, but * often works for required fields • Field Lengths • Field lengths can provide valuable affordances • Appropriate field lengths provide enough space for inputs
- 12. Enable flexible data input
- 13. Smart Defaults
- 14. Path to Completion Correct Wrong
- 15. Most Users Do Not Scroll • Recent studies prove that users are quite comfortable with scrolling • Many users are more comfortable with scrolling than with a pagination
- 16. People expect certain things • Usage Patterns • Link colors • Blue is the best color for links • The location of the logo • The behavior of tabbed navigation
- 17. White Space Improves Comprehension • When a new visitor approaches a design layout, the first thing he/she tries to do is to scan the page and divide the content area into digestible pieces of information. • White space de-clutters a page by giving items room to breathe • Group items together by decreasing and increasing the space • Important for showing relationships between items • Make content more readable
- 18. Enable keyboard shortcuts • More responsive and interactive user interfaces • Best examples • Twitter • Gmail • Hotmail • GitHub • DuckDuckGo
- 20. We Need FeedBack • Your Customers opinions and feelings are acknowledged as being important. • Your Customers are listened to and heard, a positive feeling is directed back to you as their supplier. • Your Customers realize that their supplier (your company) is interested in improving and enhancing their business relationship. • Your Employees are reminded that that their diligence and completion is paramount. • Customer feedback is a foundation for process improvements that lead to efficiency and profitability. • Your Customers are reminded of your Company’s name and the diligence you have taken to meet their needs.