How to be different?
0 likes1,159 views
This document provides tips for making web application interfaces unique, including developing cross-browser compatible designs, using vector graphics, responsive web design, designing intuitive forms, using white space and color coding appropriately, enabling keyboard shortcuts, and gathering user feedback. The tips aim to improve the user experience, functionality, and readability of interfaces across different devices and browsers.
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.