How to be different?


Published on

Some tips to make web application interface special.

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

How to be different?

  1. 1. How to be different?Some tips to make web application interface specialSaeid Zebardast
  2. 2. Cross-browser
  3. 3. Cross-browser• Pros• Consistent, stable browser rendering andfunctionality• Ease of using/viewing for end-users• Higher quality website
  4. 4. Cross-browser• Cons• Developing Time• Testing Time• Per Browser• Per Platform
  5. 5. Vector Graphics• Easy to create/edit• Resolution Independent• Reducing HTTP Request• Styling And Scripting• Can Be Animated And Edited• Smaller File Size
  6. 6. Responsive Web Design
  7. 7. Responsive Web Design• Sample websites••••
  8. 8. Flat Or Skeuomorphism
  9. 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. 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 dynamichelp system• Ensure consistent communication• Errors, Help, Success
  11. 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. 12. Enable flexible data input
  13. 13. Smart Defaults
  14. 14. Path to CompletionCorrect Wrong
  15. 15. Most Users Do Not Scroll• Recent studies prove that users are quitecomfortable with scrolling• Many users are more comfortable withscrolling than with a pagination
  16. 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. 17. White Space Improves Comprehension• When a new visitor approaches a design layout, the firstthing he/she tries to do is to scan the page and dividethe content area into digestible pieces of information.• White space de-clutters a page by giving items room tobreathe• Group items together by decreasing and increasing thespace• Important for showing relationships between items• Make content more readable
  18. 18. Enable keyboard shortcuts• More responsive and interactive user interfaces• Best examples• Twitter• Gmail• Hotmail• GitHub• DuckDuckGo
  19. 19. Color-Coded Lists
  20. 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 toyou as their supplier.• Your Customers realize that their supplier (your company) is interested inimproving and enhancing their business relationship.• Your Employees are reminded that that their diligence and completion isparamount.• Customer feedback is a foundation for process improvements that lead toefficiency and profitability.• Your Customers are reminded of your Company’s name and the diligence youhave taken to meet their needs.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.