To kill, or not to kill the hamburger, that is the question

I like to eat hamburgers and even turkey burgers. But we’re not talking about burgers that would make Jules Winnfield salivate. We’re talking app and mobile web experiences that have become the virtual junk drawer.

Thanks to Luis Abreu the conversation about the value of the hamburger has kicked up again. I don’t want to rehash what Luis has written. But in summary Luis suggests that the hamburger has become the place to stick all of the leftover stuff that couldn’t fit elsewhere.  Once you have relegated a feature to that area you run a significant risk of your users never finding it.

Many “big brands” consider themselves excluded from the discussion. Why? Take a look at the examples used by Luis? Facebook, Twitter or IRC chat are not going to be a strong sell to a Fortune 1000 company. The notion at those organization many times is that “we’re different” or “that might work for them but we have many more products/services”.

What to do then? How can a large corporate entity that isn’t a tech giant in social make sense of the UX pattern? How can consensus be built to avoid this pattern? Is this another blog post talking about a bunch of stuff that doesn’t apply to a corporate gig?

Stakeholders need to be reminded that mobile web/apps should not be treated like a website. Our websites have grown heavy with bloated keyword rich content, ‘sexy’ imagery, features and functionality that attempt to capture a long tail user. Repeatedly reminding stakeholders that mobile is a tiny screen where customers will view content in 60 seconds or less is going to be crucial in building a great mobile experience.

Companies may need to break the “concept” into different applications. This may sound like blasphemy, but it’s not unusual. Chances are you do it on the web already. Microsites are used all the time. But is anyone other than Facebook or Foursquare breaking up their apps? Yes!

ESPN
There are 15 apps available for iPhone. They have made 7 of those apps available on the iPad as well as one iPad only app. That means ESPN, the “World Wide Leader In Sports” has 16 applications on iOS alone. Of these only three and a half use the hamburger menu. Couldn’t they just combine these into a “mega app”? Maybe but is anyone else doing this?

Ford
Ford has 16 apps available on iPhone and 9 of those work on iPad. They also made 8 iPad only applications. You might be able to argue that two of these apps have a hamburger menu. These two apps to have the icon, but it is presented in a different way than the typical location in the top left corner.

Others Examples
Rolex (4 apps, no burgers)
Amazon (15 apps, 4 burgers)
AT&T (40 apps, a few burgers)
Coca-Cola (40 apps, a few burgers)

Summary
In short, do not let the “hamburger menu” be the cure for all of your ills. There are ways around using this approach. Other large companies are doing it and so can you. If your direct competitors are lagging behind, champion a user centered approach that fits you user approach.

Next time we’ll explore some Pros and Cons to this approach and try to make some more sense for killing the hamburger menu. Sure it may be much easier to include a junk drawer to pacify stakeholders, but what about your users? Do you want to give them an easy experience that they keeps them coming back? Or do you make it a hassle that they despise?

http://lmjabreu.com/post/why-and-how-to-avoid-hamburger-menus/
http://techcrunch.com/2014/05/24/before-the-hamburger-button-kills-you/

Advertisements

Mobile Prototypes for Product Managers #SVPCAMP

Mobile Prototypes for Product Managers

Etay Gafni – 
Demo Right

Goals – Educating your teams/boss
– Why
– Who
– How

You’re going mobile
Big Market, Money and Buzz
But, Big risks, investments in new technology
Are you looking ahead or trying save/leverage past investments?

Keep in mind
Keep It Simple Stupid

Story – Writing in Space
Task: Design and develop a writing device
US: Spent millions for a pen
USSR: Used a pencil

Questions you should ask
Which operating systems?
Which devices?
Native or HTML5?
*Are you developing the right app? (for your customers)

Traditional Process
Is there demand for this mobile app?
Did we prioritize and validate features with our customers?
How can we create detailed specs for our distributed development team?
How soon can we monetize it?
Will my competitor see my application before my customers?

The Mantra
Fake it until you make it

Test it
Get constant feedback from customers
Build the right app with clear specs
shorter time-to market
longer ‘shelf-life’ for the app

The dark side of prototyping
The prototype is the product
The prototype is NOT the product
Everyone is a designer/developer/product manager

Process
Create -> Test on target audience -> Collect Feedback -> Analyze -> Improve
After Analyze -> Lock -> Spec -> Demo/Dev(branch)
Question: How does it differ from web prototyping?
A: Not really different, just keep in mind it is mobile.
Q: How long to you schedule?
A: Depends on scope. You have to ask the right questions. 

The main steps
Create, Share, Analyze

Fidelity Levels
Wireframes – basic interaction (paper, ppt)
VP Frame – sketch for Vice President
High Fidelity – designer based

Tool Kit: Paper
The good – fast, cheap, mobile 1/1 feedback
The bad – just low fidelity, hard to manage versions, hard to scale
The ugly – as good as your handwriting

PPT to Photoshop
The good: Fast, Cheap, You know how to use, audience can view
The bad: Focus on high fidelity, not mobile, hard to manage versions
The ugly: Everyone is a designer, can’t collect feedback

Code
The good – real code, can publish
The bad – expensive, technical, is it right?
The ugly – too late, ready to sell

All the templates are here: http://demoright.com/static/pcamp2011

Q: For small companies with a big client, what kind of tools do you use?
A: PDF’s work sometimes, but difficult for online feedback.

Q: How do you collect feedback?
A: Focus groups can be good but hard for mobile. Distributed focus groups can be a solution.

Q: Is it qualitative?
A: I want to understand how they use it without forcing them to tell what they did.

Q: Do you prototype workflow?
A: Yes. You want to know that the functions work. Transitions can come later.

Sharing/Testing
Select people that will use the product
Control the distribution
Test on device and online
Set expectations
Define tasks
Define success
Don not try to fix in real-time

Analyzing
Parameters  What can we learn
Clicks distribution  Navigation
Target Screens  Task completion ratio
Navigation flow  How does the user understand/use the application

Educating Your Boss
Why? Prototyping lowers the risks, You can lower costs
Who? Everyone can do it, no technical resource required, better if PM/Designers get a head start
How? Keep it simple, use tools you know, test on devices, share with your audience, ask the right questions

Q: How do you prioritize features?
A: You have to evaluate the feedback. Right audience, features, uses, etc. 

Q: What are good apps?
A: Angry Birds, Amazon

Creating Mobile Apps Based on Behavioral Patterns and Specialized Platforms #w2e

Creating Mobile Apps Based on Behavioral Patterns and Specialized Platforms

Aaron Patzer
Mint.com

Mint was just a web app to begin with.
50% of Mint users are mobile and 20% are only mobile.
Web login 5 times a month, mobile is 2-3x higher

Web-app usage by task
1. Overview
2. Transactions
3. Add/Edit accounts
etc.

First app was designed for "on the go" information
Read only view

Version 2
People wanted more security features.
Edit transactions

Version 3
Web was no longer needed (signup, edit, adjust)
Application is separate

Version 4 What can mobile do that web can't?
Spending Trends
Add/Edit budget
Purchase alerts at POS
Sensors = OCR Receipts + Deposit

Tripled team size in the last 6 months. 10-12 now with 5-6 open positions.

How mobile friendly is your website? #w2e

How mobile friendly is your website?
Melissa Clark – @melissaclark
Siteworx, Inc.

Presentation (PDF)

Mobile Landscape
Apps, Mobile web, SMS

Mobile Optimized Web
Critical to optimize the desktop experience for mobile devices
W3C “One Web”

Device Detection
Light Weight – HTML 5, CSS3
System Text – no text in images
Replace Flash
No pop-up, hovers or overlays
Mobile Capabilities – Maps, push to call, native keyboards, touch/gestures, home icon

Custom Mobile Web
Provide rich, custom design experience
Target larger audience than apps
Can look like native app
Better capabilities of managing content
Give access to desktop version
Touch device vs non-Touch
Does the CMS support mobile web?
Avoid creating a mobile channel that isn’t died into main content.

Implementation
Devices – Networks – Browsers
Graceful degradation – Rich content/cutting edge but should have a simple version for less capable devices
Progressive Enhancement – Start with dated device with some additional features without degrading experience

Testing
Hardware costs are high and there is limited common features between devices

Solutions
Use analytics to identify top 10 devices
Testing can be iterative after launch
Use emulators or test services
Mobile plugin’s should already be tested (CMS)

Building Cross-Platform Mobile Applications @jonathanstark #w2e

Building Cross-Platform Mobile Apps
Jonathan Stark @jonathanstark
http://jonathanstark.com/web20

Staggering Growth

  • average daily usage
  • mobile media usage
  • smartphone ownership

5 billion subscriptions in 2010

Fragmentation
Software: iOS, Android, BB, WP7, webOS and many others
Device: 68 different models in 2010 in the US, 100+ tablets at CES, screen sizes
Even with Apple
camera yes/no, multitasking, 3G, GPS, etc.

Hybrid Apps
Write the code with HTML, CSS and JS then wrap it in native applications

Intro to jQTouch
jQuery plugin
Created by @DavidKaneda
Native CSS3 Animations

Demo

PhoneGap
Open Source
Created by @Nitobi
Native app wrapper
Multiple platforms

http://docs.phonegap.com/ for hardware API support by platform
http://build.phonegap.com/ for compiling on different platforms (private beta)

What about performance? Performance is similar to the browser. It isn’t going to be like a native app depending on the amount of data used to build the app.
Is there an issue with cross domain requests? No.
Will PhoneGap continue to support new features as the mobile OS changes? They are, but somewhat limited there are plug-ins.
Are there samples/examples using PhoneGap? http://www.phonegap.com/apps/
Is there push back from Apple on the design guides? There doesn’t appear to be anything about PhoneGap today that could cause a problem.

Debugging

Using a desktop web browser it has gotten much better Safari and Chrome are built in and Firefox has Firebug
Old way is using the debugging console in iOS. Pretty painful.
Weinre – Debugging tool that uses a Java web server that allows a client to access the server. Works like developer tools for mobile browsers. Allows interaction with DOM in real-time.
JSConsole – Console window for JS. You can use “listen” to do some cool tricks.

CSS3 Transforms, Transitions & Animations
Transforms: scale, skew, translate, rotate, origin
Transitions: kind of like tweening with Flash works on shapes, colors, etc.
Animations: supported in webkit

Offline Web Apps
Web Storage: store name value pairs that are consistent (local and session) generally want to keep it under 5MB, must be as a string
Web sql database: record style data gives you a way to store data locally to reduce required connections to the server. Can allow you to let users interact without a persistent connection and sync when connection is available.

Friday Fun: Two Weeks in a Row? Hold the Press

I know I shouldn't be surprised by this but can May be nearly done? In this recap we'll take a look at some of the news from Google announced this week and some fun diversions.

Google News
There are lots of stories out of the Google I/O event this week. What I found particularly interesting was the opening of some of their API's for anyone to use. Some examples are listed below but Google has also released API's for Gmail, Buzz, Wave and a number of other products recently. Google has effectively given startups and small businesses the ability to leverage the infrastructure of an Enterprise. The potential is there for small and medium size businesses to no longer fear a massive CRM investment since Google is doing all of this for free.
Latitude – Is a location API that can leverage user location and location history for an application.
BigQuery – Allow users to use Google's infrastructure to analyze large datasets. 
Prediction – This API will use Google's prediction algorithms to provide predictions to an application. 

Google TV is sure to be a hot topic this shopping season but the living room is a mess with the number of companies involved. This post from John Paczkowski provides a great overview of some of the players that have tried and failed and why Google is facing a difficult road ahead.

Android Froyo was announced and provides all sorts of updates to the phone operating system that will really push Apple. One report I read pointed out the Google has been trying to catch up to Apple since they first announced Android and this release leap frogged right past the upcoming iPhone OS 4 release.

There was much more that came out from the event that I'll take a look at in the future. 

Facebook Community Pages
This is an interesting development that could affect Brands trying to make a name for themselves in Facebook. Community pages are a combination of Wikipedia entries and Facebook user chatter. These pages can have an unintended consequence as noted by Jeremiah Owyang (@jowyang) at the Altimeter Group in this blog post. The issue for brands is confusion with Facebook and difficulty responding to comments in the pages. Facebook users can find themselves posting content to these pages unwittingly if their wall posts are public. Try searching for "My Stupid Boss" on Facebook. 

Openbook = People Put Weird Stuff on Facebook
Have you ever wanted to search Facebook public content just to see what sorts of weird and embarrassing things you can find? Look no further. This post from Consumerist sums it up nicely.Try it out for yourself. (it might be slow)

Gowalla and IHG Tag Team
Barb De Lollis reported on a promotional campaign that will give Gowalla users a message about their summer promotion when they use the application to "check-in" while visiting one of their properties. It is interesting to see some experiments with location based platforms. The Las Vegas Hilton has been playing with Foursquare as have a few other hotels listed on Hotel Chatter.

Wowzers! This Video is Mesmerizing.
This video really feels like it should be on display in the World of Tomorrow. This is fun eye candy.

Mobile Ads Work (sort of)
This post from Gizmodo refers to a longer post from GigaOm and studied the effectiveness of mobile ads on different platforms and found that Symbian, think old school (2007), mobile phone ads are still the most effective for advertisers. There are a couple of obvious reasons for this but again it serves to show that Smartphones, think iPhone and Android, still have room to grow. The recent announcements from Apple and Google will likely make a more significant impact for their respective platforms in coming years.

Mobile Sensors – Sniff, Sniff
Researchers as UCSD have developed a sensor that can detect airborne toxins and alert the cell phone user. It may not be in the next Google enabled phone from HTC, but there could be some interesting applications for this type of sensor. 

Try On A Virtual Watch
I'm not sold on Augmented Reality in its current state. However, this idea from Tissot is not terrible. It is a little cheesy.

Read Write Web Mobile Mobile Summit 2010 #RWWSummit

This is the keynote presentation from the Read Write Web Mobile Summit and contains some great information related to mobile. Slide three is great for putting some perspective on the use of mobile phones around the world. Smartphones are all the rage right now, but the reality is that most of the world has not grabbed the smartphone revolution. 

You can find the original post where this deck is included here: http://www.readwriteweb.com/archives/mobile_summit_keynote_plus_photo_highlights.php

I somehow managed to sneak into a couple of pictures during the event taken by Chris Cameron.

I might be trying to shoot laser beams from my eyes or I'm trying to understand the proposed session.

Another great shot of me trying to figure out what in the world I'm going to next. There were so many great topics but not enough time.   

I love this picture as we were having some great discussions around mobile websites, apps or development platforms