Your SlideShare is downloading. ×
How to be different?
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

How to be different?


Published on

Some tips to make web application interface special.

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. How to be different?Some tips to make web application interface specialSaeid Zebardast
  • 2. Cross-browser
  • 3. Cross-browser• Pros• Consistent, stable browser rendering andfunctionality• 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••••
  • 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 dynamichelp 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 CompletionCorrect Wrong
  • 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. 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 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. 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 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.