Designing applications with web access capabilities

Designing applications with web access capabilities

• 1.
  Designing applications with web access capabilities KSenthil Kumar Assistant Professor Sri Eshwar College of Engineering, Coimbatore – 641 202
• 2.
  Designing application withweb access  Application with web access tries to get some data from internet.  Example : Ebook Readers  A web app that is difficult to figure out or insufficient will never win the app race.  But at the same time designing good user interface is difficult  The common problems are choosing right colors and creating right place for contents  If app developer failed to satisfy user needs then user go to another app for same task.  Example – rechargeitnow  freecharge app
• 3.
  Rules for webapp design  Don’t reinvent pattern  Group related elements  Less is better  Plan before developing  Provide feedback  Unobtrusive Help  Helps users decide  Focus on Target users  Where am I  Where did that come from  Design for No data  Keep Consistent  Load Quickly  Test
• 4.
  Don’t reinvent pattern Whenreporting a post, Facebook displays the “Continue” button placed on the right-hand side and makes it more prominent than the secondary option “Back Always use the common pattern that the users are familiar. Example : red  for error envelope  message
• 5.
  Group related elements Buffergrouped all profile-related controls under one drop-down. This way they can’t interfere with other features in the app. Always place related elements or views in single menu. Example – Sign out and change password in setting menu
• 6.
  Less is better Alwaysgive limited functionality in single app Example : freecharge  only for recharge TeuxDeux is an app that basically only does one thing — saves tasks for different days.
• 7.
  Plan before developing Takesome time to review the design before code. Changing after Coding is difficult Mailchimp has a nice user flow that guides you through creating an email campaign with a breeze.
• 8.
  Provide feedback Always providefeedback for each user in app, if user types some text Then give immediate feedback by saying something about input Beautiful button animation combined with the spinning loader in the Headspace web app lets you know your request went through.
• 9.
  Unobtrusive help Some timeuser don’t know how to use some elements so give some Kind of tips to user for knowing about elements usage Tumblr gives you an option to take a short tour or skip it.
• 10.
  Help Users Decide Providehelp to new users to complete the task more easily It’s hard to say no to Pinterest’s obvious “next step”.
• 11.
  Focus On TargetUsers Create a app based on target users, creating app for computer Teachers is different from non computer teachers Github’s clean interface isn’t rich in graphics and full of explanatory text.
• 12.
  Where Am I? Helpsthe user to know about their current location in app By using methods like navigation bar MightyText app uses double navigation in settings to help users easily navigate the interface.
• 13.
  Where did thatcome from? Help the user to know about the data that is app screen Wistia shows a simple slide effect to display more tools.
• 14.
  Design For NoData Never place empty places in app, even in some place user have to Give some data, then create a text that makes user understands A nice illustration and a tip help new users get accustomed with Dropbox.
• 15.
  Keep Consistent Always keepconsistent design in all pages Wherever you are, you always know where to look to find left-side links in Gmail.
• 16.
  Load Quickly Never makethe user to wait for more time Sounddrown displays their logo with a simple animation while the app loads.
• 17.
  Test Test the appusing multiple people with multiple backgrounds