Rules to Better Interfaces (Mobile)

​Since 1990, SSW has supported the developer community by publishing all our best practices and rules for everyone to see. 

If you still need help, visit Website Design and User Experience​ and book in a consultant.​​

Hold on a second! How would you like to view this content?
Just the title! A brief blurb! Gimme everything!
  1. Do you design for touch interfaces?

    With the internet moving so fast into the world of mobile devices, it's important to design for a variety of platforms. Many websites these days have a unique mobile optimized site which is great for usability.

    Although mobile browsers are capable of rendering your normal website, some functionality does not carry across. Touch screens have no concept of "hover" so drop down menus must be activated on click. Screen estimate and the precision of the user is impaired on touch devices, so links and other clickable objects need to be rendered bigger.

    The key thing to remember is that a mobile phone is a different device and have completely different use cases. EBay on a desktop can be used for a large variety of cases, including the creation of new bids, while EBay Mobile is primarily for checking activity while on the move. The focus of a mobile design for EBay centers on browsing, bidding and status updates for products - it doesn't need to cover all cases, just the right ones.

    True mobile interface design focuses that which is used on mobile and simplifies the process.

    ​Figure: Bad Example - TimePro as it renders on mobile. It is near unusable!
    ​Figure: Good Example - TimePro designed for mobile.
  2. Do you know to hyperlink your phone numbers?

    These days more than 50% of people use mobile devices to browse websites.

    Therefore, it is very important to hyperlink your phone number to increase the rate of conversion and improve the mobile user experience. This enables click and call, and eliminates the need to copy and paste phone numbers.

    ​Devices an​d computers that don’t have phone functionality will either open a phone app or add the number to a contact list.

    <a href="tel:+61299533000">+61 2 9953 3000</a>

    Figure: Good Example – This is the syntax to hyperlink phone numbers.
  3. Do you know what guidelines to follow for WP?

    Microsoft has extensive documentation regarding the use of WP design guidelines: http://msdn.microsoft.com/en-us/library/windowsphone/design/hh202915(v=vs.92).aspx

  4. Do you know when to build a WP app over an iPhone app?

    1. If your app is built on Silverlight today. Stop building things on Silverlight today.
    2. Reasons are:
      • Time to market
      • Lower cost
      • Reuse MVVM
      • Reuse Silverlight controls
      • Reuse the Business and Data layer
    3. The Biggest thing going for windows phone is:
      • .NET dev shops
      • Environment more productive than xcode

      Note: WP7 is built on Silverlight 3 (not Silverlight 4)

      Note: WP7 was built by a 'web team' not "Rich client app team', so some issues exist:

      • Bing map control relies on host page (authentication)
      • Avoid using System.Windows.Browser.dll in your Silverlight App (as it works only OOB on desktop) and you will have to use a different control on Windows Phone 7
    4. Others reasons are:
      • You can deploy your app without going through the appstore/market place. E.g. my SSW business app
        Appstore: No
        Market place: Yes

      • Turn around through the appstore is quicker:
        Appstore: 1-3 weeks
        Market place: 2 days (Quicker since it is managed code. Unmanaged code is easy to spot)

      • App store is blocking applications MS won't.
  5. Do you know when to build an iPhone app over an iPhone web app?

    ​ It depends on:

    • Your Budget
    • Usage of native API
    • If you have an existing web app - in this case, it's easier to convert it to a web app by adding CSS

    Note: An iPhone (or WP7) web app without a network connection, will not load the web page you were on previously.

  6. Do you use Chrome DevTools Device Mode to design and test your mobile views?

    Making a responsive​ website work well on a mobile is not easy but with the right tools you can save time and avoid bugs. ​You should use Chrome DevTools Device Mode ​to test different screen sizes.​

     

    ​​​

    Figure: Bad example - Using your browser to test a responsive website layout.
    2015-02-16_17-44-01.jpg
    Figure: Good example - Using Device Mode & Mobile Emulation in Chrome.
      How to test a responsive website with Chrome DevTools Device Mode 
    1. Watch this video below​
    2. Read the documentation on the Chrome Developer Website.​
     


    ​Additional resources