Recap: Brad Colbow – It’s the little things

Last week we were lucky enough to have Brad Colbow talk about designing interfaces for mobile devices. Brad has extensive experience explaining usability and produces a Web comic called “The Brads.”

The Presentation

Notes from the meeting:

  • Brad works from home and has a specific routine that he follows every morning. One day that routine was interrupted because his daughter was having friends over. So he decided to work from a friend’s office which was quite some time away.
  • He decided that he would pass the time driving by downloading an audiobook from his local library. He browsed the website and found the book he wanted. He then went on to download the book and found the experience so frustrating that he made it a topic of one of his cartoons: Why DRM Doesn’t Work.
  • He loves to take dense mental model information and turn it in to a comic strip that anyone can understand
  • Brad’s day job was building magazines for iPad and iPhone. They didn’t have an iPad yet, so they started on the iPhone and thought they could scale up from there. They knew that magazines needed to be better digital than print. They started with the user interaction guidelines that are available for iOS, Android, Blackberry, etc.
  • What is the secret to creating a great user experience?
    • Looking at experiences they liked
    • Listed reasons and tried to figure it out
    • When you study a bad experience you can easily figure it out
    • What could they use as a bad experience? The Library
  • The little details matter
    • On the library website when you browse for audiobooks you see and can search the entire selection. But when you decide on one and are ready to download it you get an “Add to SelectList” option. What is a “SelectList?” It’s not even a real word..
    • In a real library if you can see a book on the shelf, you can check it out. That experience isn’t mirror on the library website.
    • Stuff like this is not nitpicking. It’s not the big thing that gets you, it’s all the little things that bother you over time.
  • Brad outlined some great user experiences, for example using Dribbble on an iPad. iOS will auto capitalize the first word typed, usernames are case sensitive, so when you login to the website you have to be sure the first letter of your username is lowercase. This is a minor inconvenience but because these two systems obviously have their own motivations it is justified. But the developers of Dribbble must have experienced this first had and added “autocapitalize=”off”” to their username field. It is these little details that make it such a great experience.
  • Brad then went on to outline a few UI differences between iOS and Android and why designing a single interface won’t delight the users of both OS’s. The users of each OS are use to a certain button placement and experience.
  • Some best practices
    • Don’t let the UI hinder the experience
    • Be Skewmorphic sparsely
    • Elevate the content people care about
    • Mobile websites are to do something one time and be done with it. Don’t put an ad on your site to download the app.
    • Avoid forcing the user to rotate the device
    • Don’t make up new touch gestures
    • Avoid help. If you need an instruction manual, you’re doing it wrong
      • If your app needs help, your app needs help.

Full presentation available at: https://speakerdeck.com/u/bcolbow/p/its-the-little-things

 

DudaMobile: Simply Awesome!

Recently, I tried out DudaMobile. They just launched their new, self-serve platform that lets existing website owners create a mobile version of their website and enable auto redirects when accessed via mobile devices.

This is essentially a boon for small business owners. Ones who don’t have much complexity on their website, but since the mobile phones are now an important channel for bringing in more revenues (or providing a better Quality of Service). DudaMobile instantly creates a mobile version of their existing site. For free. This means a LOT of savings in terms of time, effort and money.

The mobile website can also be customized to add themes and custom colors. They also provide some cool widgets – particularly apt for a mobile site: click to call, SMS sender, maps and directions etc. Still, if you happen to have a developer in the office who wants to improve the look and feel, you can choose to do so as well – simply using CSS and HTML.

Behind the scenes, my guess is that there is a service that detects HTML elements like hyperlinks, image divs, tables etc and applies a relevant jQuery layer on top of it. So the cool mobile-optimized buttons, background colors, resized images etc. Anyone who has a different discovery, feel free to share.

Here are two basic advantages over similar competing products:

  1. Mobstac: relies mainly on rss, cms etc to draw/paint the site (or so it seems). But seems that they generate automatically. But one MAJOR disadvantage: most of the websites I tried couldn’t be converted. Seems they really have to either rethink their choices or log in a ton of man-hours before this could really knock off everyone else.
  2. Moably: asks for email/signup even before previewing. This is SUCH a major turn-off. Totally not done. Also doesn’t appear to automate the process. Seemingly they would offer a quote to develop the website. Hence, not really a true competitor in terms of time/price. Off course, the quality could be fairly different. Haven’t tried, no comments on that.
  3. For the free version, the mobile website will have some ads on every page with a DudaMobile footer. A free site is also limited to 10 pages and 500 MB. The free version URL is also the Duda URL (dudamobile.com/yourcompany) Mobile site analytics are also included in the free version, which in my opinion, is a huge plus.

    For $9.99 a month, DudaMobile offers an ad-free site with customizable footer. Also include cool widgets like SMS sender, maps & directions etc. Also the URL for a paid site is personalized (m.yourcompany.com) EMail support is available for the paid version. Per their website, they are soon bringing in Google Adwords integration too.

    Now thats the way to go Duda!

Recap: May PhoneGap Meeting

For our May meeting, Erik Daniel presented PhoneGap and his experience writing mobile websites how to transition them to native applications.

What is PhoneGap?

PhoneGap is an HTML5 app platform that allows you to author native applications with web technologies and get access to APIs and app stores. PhoneGap leverages web technologies developers already know best… HTML and JavaScript.

Why was it created?

  • Safari html5 offline data has a 5 meg limit. This doesn’t make it viable for a true offline experience.
  • The current mobile market worldwide:
    • 36% Android
    • 27% Symbian
    • 17% Apple
    • 13% Blackberry
    • 4% Windows
    • 3% Palm
  • Not very many people know every single mobile platform
  • Almost anyone knows the web
  • You don’t need anything to write a website except a text editor.
  • PhoneGap is not
    • An IDE
    • A Build Tool
    • A substitute for good code
    • Going to magic your app into a billion sales
  • What is it?
    • HTML5 + CSS3 + JS

Pollyfill

  • Taking a feature set that is not yet developed but taking those features that have not been developed yet and backfill that functionality
  • Examples:
    • Geolocation
    • PhoneGap wrote an iOS extension to expose the GPS location of the phone to JS
  • Cross domain Ajax doesn’t apply on mobile apps
    • They assume if the app is signed it is quality code
  • Works just like an html5 app
  • Some example API calls:
    • network.isReachable
    • notifications.alert
    • console.log(“stuff”)

Why should you use PhoneGap?

  • You don’t know iOS
  • You don’t know Java
  • Offline HTML
  • One app to rule them all
  • You’re on a tight Schedule
  • Looking for Webish Features

Some limitations

  • Building to an iOS device you need Xcode
  • 99% of your app development can be done in Safari or Chrome
  • To publish your app to App Store, you need a $100 license
  • Don’t use PhoneGap for
    • Apps with intense graphics
    • Weak target phone with an intense Google Map app

The future of PhoneGap

  • build.phonegap.com
    • Remote PhoneGap builds, just upload your application and it does all the work
    • Erik still suggests to build your own apps, you don’t want any third parties potentially touching your code
  • Dreamweaver CS5 builds PhoneGap
  • PhoneGap will eventually be unneeded as phones expose more features to the browser