Mobile Web App Considerations

Below are useful considerations/topics I’ll keep in mind while designing and building the Mobile-UIs web app. They’ll also help me understand why I’ve chosen a particular strategy before I start building.

Registration and Login

  • There will be registration functionality
  • Design one registration flow for desktop and another one for mobile
  • For mobile flow consider using the email address as the username = keeps typing to a minimum
  • Think about field validation. Validate with JavaScript? Don’t forget error messages.
  • What extra refinements can I make to the form for devices that support HTML5?
  • Use CAPTCHA?
  • SMS-based activation experience. Sweet.
  • Cookies on the mobile site… yay or nay?

Presenting the Content

  • Use the server to resize images or a service like TinySrc?
  • Present a layout of thumbnail images?

Usability

  • Optimize user tasks on the mobile version of the site (efficiency)
  • Use the native app pattern of the toolbar at the bottom?

Miscellaneous

  • Retina.- make assets big enough for it, then scale them down for non-retina displays. Don’t do the opposite bc I’ll mess up the graphics by scaling them up.
  • How to implement user contribution mechanism?
  • How will I make it social and personal (vital elements in web apps)?
  • Create a separate site for mobile users? separate URL? User agent detection is unreliable.
  • Design & behavior consideration: the Uncanny Valley of user interface design. Don’t try to make the mobile site look like a native app bc users will have expectations that are impossible to meet.
  • How to provide the right experience… how will the server or client know whether to present the desktop or the mobile site?
  • Provide link to desktop site on the mobile version. That way I don’t deprive users of any functionality. I don’t think it’s possible to upload images via a mobile site yet. A workaround: email the images to the site?
  • How to create a consistent brand and user experience b/w mobile and desktop?

Speed

  • Design for mobile first, i.e. responsive web design won’t cut it bc you don’t want to force users to download resources they may never even see. Go with progressive enhancement instead.

Continue reading

Mobile-UIs project: The approach

Let’s say you’re developing a mobile app and need some inspiration. Where do you go?

There are 2 or 3 sites that show a collection of app screenshots but the selection is not extensive. I wish there was a site where users could add to the site’s collection = a valuable inspiration resource. What would it take to do that?

The approach (braindump)

  • I’ll take James’s advice:

    The two keys: (1) keep it simple, (2) make it something you’d actually use.

    Once you’ve got something working, then build a series of improved versions. Don’t create pressure by making a version suitable for public distribution, just take a long look at the existing application, and make it better.

  • Ok, so should I build this with WordPress, another CMS or something like Rails?
  • Should I plan to include the user submission functionality in version 1 or leave it for version 2? Why?
  • Should I use Git for version control?
  • Keep in mind the 10 golden principles of successful web apps

The navigation structure

Here’s what I think the navigation will look like…

list of category names

early navigation structure