Some tips to make web application interface special.

1. How to be different?
Some tips to make web application interface special
Saeid Zebardast
http://zebardast.ir
saeid@zebardast.ir

2. Cross-browser

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

6. Responsive Web Design

7. Responsive Web Design
• Sample websites
• http://foodsense.is/
• http://www.smashingmagazine.com/
• http://www.fork-cms.com/
• http://webdesignerwall.com/

8. Flat Or Skeuomorphism

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

19. Color-Coded Lists

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.