Why Outlook.com is Good For Email

Microsoft launched a preview of its replacement for Hotmail this week (rebranded as Outlook.com) and this could be a good thing for all web-based email users.

While I’m not normally impressed by the user experience of Microsoft products, my first impression of Outlook.com is that it is a significant improvement over Hotmail (which was an ancient and dying beast, to be honest).

Interesting side note: I actually had to create a new Hotmail account and then upgrade to Outlook.com since I hadn’t signed into Hotmail in at least 10 years or so.

Outlook.com is exciting because it could introduce new competition into the web-based email market. And competition is good; it keeps us on our toes and forces us to constantly focus on improving our products. The screen shots in this post clearly show Microsoft is moving to a more simplified user interface that makes better use of layout and content organization. The product appears to be taking cues from the more simplified design of Google’s Gmail.

The annoying ads that plagued Hotmail have been reduced and social media integration with Facebook has been added (although I did not experiment with it).

There are plenty of beta-software moments, like how editing your profile takes you back into the Hotmail user experience, but it was clearly labeled as a preview.

Engadget gives the Outlook.com preview a pretty good review. CNET also gives the preview pretty good marks.

Would I switch over to Outlook.com? Probably not, mostly because I have committed too much effort to living with Gmail and Yahoo Mail. And in the mobile-centric world I live in, most of my email is sent and read from a mobile device anyway. But if Microsoft can keep its smaller Hotmail user base from moving to Gmail or Yahoo, it will probably consider the effort a success. And if Outlook.com causes the other web-based email providers to keep looking at ways to improve their user experience, we all win.

Hotmail
Hotmail
Outlook.com
Outlook.com

Tap Targets Should Be Sized Appropriately

It seems so obvious that tap targets on mobile devices should be discreet tappable regions on the screen. But sadly that’s not always the case, even on mobile websites and apps from major content creators.

Font Size Controls for the CNN Mobile Website, the LA Times Mobile Website, the AP iPhone App, and the New York Times iPhone App
Font Size Controls for the CNN Mobile Website, the LA Times Mobile Website, the AP iPhone App, and the New York Times iPhone App

One of the main uses of handheld mobile devices is taking a quick look at the latest news. And often people’s eyesight is not as good as the young designer who created the app, so a mechanism often is (and should be) provided for people to increase the font size, especially since reading is the main reason people are using the mobile website or app in the first place. Sadly the mobile websites for the LA Times and CNN, and the Associated Press iPhone app all fail at this simple task.

In the accompanying image note the size and spacing of the font controls on the CNN mobile website (the first screen grab). In this image I positioned them adjacent to the Mobile Safari control bar for comparision. Note the difference in size and spacing between CNN’s mobile website and what Apple recommends in its iOS Human Interface Guidelines. It’s not even close, and this is a product from a major content producer that’s designed for mobile users.

The same problem exists on the LA Times mobile website (the second screen grab). The controls to increase or decrease font size are too close to one another and are too close to the Reset link. Imagine tapping the big A twice to increase the font size and then hitting the Reset link when you are trying to increase the font size one more time.

The Associated Press iPhone app is an even stranger creature (the third screen grab). Font controls are actually buried in a settings menu. So it’s not clear to someone that they can change the font size, and if they want to they have to hunt around to find the control. The controls themselves are sliders, which require a person to apply a bit of precision to their adjustments. Wouldn’t an up/down arrow construct work just as well? This smacks of a design in search of a problem to solve.

The New York Times takes a different approach with its iPhone app (the fourth screen grab). There is only a single control, which increases the font size until you cycle through all the options and return to the smallest size. It’s not clear at first how this works, but it’s very learnable. And the size of the tap target and the spacing around it are in line with Apple’s recommendations.

Most mobile device makers provide user interface guidelines to developers. More designer should read them. Here are the design guidelines for three mobile platforms:

HCI 530: Usability Issues for Handheld Devices

I just completed my latest DePaul University graduate HCI course: Usability Issues for Handheld Devices. I want to share one of the papers I wrote, a brief survey of automotive telematics and the associated usability issues and related regulatory frameworks. It’s hardly an exhaustive work due to course time constraints and an assignment maximum page limit, so it does not touch on every aspect of telematics or all the possible usability problems in this emerging field of computing. It does, however, point to some interesting topics for more focused future research.

My paper is over here in PDF format.

Jared Spool’s UX Immersion 2012 Keynote

This week I attended the UX Immersion 2012 conference. Jared Spool’s keynote addressed why it’s a great time to be a designer. Here are my notes:

It’s a Great Time for Extraordinary Design

  • More than ever companies are realizing that a well-designed product or user experience is essential to business success.
  • Experience design is more mission critical than ever before.
  • Products like Apple’s iPhone and iPad have raised consumers’ expectations for what makes a great product.

Stages on the Road to a Great Product

  • When something first comes out it is often clunky, but people will buy it because it is new.
  • Then features are added and it’s a race to see who can have the most features.
  • Then a concern for the user experience comes along and you strip away a lot of features.

Bad Products Create More Frustration

  • Lost sales and revenue.
  • Increased support costs.
  • You waste time building things no one uses. No designer wants to do that.

To Sell Great Design You Need to Know How to Talk to Executives

  • Executive have their own language.
  • Five things executives care about: sell more stuff, decrease costs, increase market share, increase business from exist customers, and increase shareholder value.
  • If you want to sell an executive on the need for great design, you have to speak their language.

Examples of Great Design

  • Walgreens scan-to-refill pharmacy app.
  • Zipcar — User friendly solution to a vexing problem for city dwellers.
  • Cirque du Soleil uses beautiful design and is better than anything else out there.
  • Umbrella Today. It answers one simple question: Do I need to take an umbrella with me today?

Disney vs. Six Flags

  • The map at a Six Flags park shows how you get from ride, to ride, to ride.
  • The map at Disney World creates a sense of adventure. It shows almost no rides. Imagine being a kid stepping into that.
  • At Disney World you don’t stay in a hotel room, you stay in a resort. And when you come back the housekeeper has folded your towels into origami animals.
  • Disney pays more per housekeeper for one who can fold origami animals. And they clean fewer rooms. Can you imagine being the person to pitch that idea?
  • Six Flags = Activities, Disney = Experience. Experience is the activities plus the gaps in between.
  • The origami animal towels were started by one housekeeper on one cruise ship. No one asked them to do it. That’s often where the best design ideas come from.

How Mobile and Agile Can Help Us Redesign the UX Process

  • Agile is opportunity to redesign how we create and think about user experiences.
  • The restricted nature of a mobile device’s screen forces us to focus on the experience.
  • Mobile is an incredibly powerful wedge we can force into the business to focus them on creating great user experience.

The Making of an Extraordinary Designer

  • At every step ask yourself “are we getting closer to a better user experience?”.
  • Ask yourself “is this what a customer will pay for?”.
  • Great designers know they have to get something out quick and learn from it.
  • The extraordinary designer knows how to deliver great experiences. You strip the product down to only those features people will really use.
  • Example: In 2007 Nokia had 140 phones with lots of features. Apple had one. We all know how that worked out.
  • Great designers know that more features + more complexity = feature rot. And the user experience rots.

On Great Design Teams

  • Good judgement comes from experience, and experience comes from bad judgement. You have to give great design teams the time to fail and learn.
  • Everyone on the team needs to share the vision. Get great design embedded in your culture.

Jared Spool is the founder of User Interface Engineering. You can follow him on Twitter at @jmspool

Jeff Gothelf on Lean UX

This week I attended the UX Immersion 2012 conference. Jeff Gothelf’s featured talk looked at Lean UX and how he used it at The Ladders. Here are my notes:

On Lean UX

  • When converting from Waterfall Development to Lean UX, a great place to start is to look for stories of failure. You learn what didn’t work.
  • Lean UX doesn’t seek to answer the question “can we build this?”, but instead asks “should we build this?”.
  • Usability testing with three users helps you find the boulders, not every little flaw. Subsequent iterations can find problems in the smaller details.
  • Style guides and pattern libraries let you work faster. You have all the tools you need to solve problems. If it has pixels, it goes in the library.
  • Live style guides is a concept in which the HTML markup and CSS is attached to the product in a way that a change to the style guide changes the product.

Learnings From the Agile Transformation at The Ladders

  • UX as a shared services didn’t work because it divided people’s focus.
  • You have to put UX designers on a dedicated team to build camaraderie, focus, and trust.
  • If a UX designer must be split across two teams, make sure they have a primary team so they can prioritize work appropriately.
  • Putting a UX designer on more than two teams is a recipe for failure.
  • Solve the problem together, not in silos. Co-creation builds understanding.
  • Sketch together as a team, then everyone “owns” the solution.
  • The Ladders had many iterations on what was the right way to manage the task wall. We learned that if you cram your entire functional spec onto a board, it’s not agile.

What Lean UX Means for Designers

  • No one gets into user experience to create documents. They want to make things.
  • In fast-paced agile environments the traditional UX approach becomes a bottle neck. We need to use new tools to achieve our goals.
  • Create the lowest fidelity document possible to explain and validate whether the concept in your head is the right thing to do.
  • Don’t be afraid to sketch. All you need is a circle, a rectangle, and a triangle. This covers every interface out there.
  • Get the experience out there, not the design document. Get it in the wild to validate the concept.
  • You’ll never solve a problem with a design document, you solve them with software.
  • Unless you are building the product for yourself, your design is just a hypothesis.
  • Work in a tight integration with the rest of your product team. Designers can’t hide behind their monitors any more.
  • Pair up — Put designers together with developers when problem solving and brainstorming.
  • Pairing up also helps you build an understanding of each other’s work and limitations.

Jeff Gothelf is the author of a forthcoming book on Lean UX. You can follow him on Twitter at @jboogie

Luke Wroblewski on Mobile Inputs

This week I attended Luke Wroblewski’s day-long workshop on Mobile Inputs at the UX Immersion 2012 conference. Here are my notes:

Mobile Input Controls

  • New mobile inputs are not just disruptive — They introduce completely new ways of doing things and totally new things to do.
  • Some designers will tell you not to use text inputs because people won’t type on a smartphone, but people send 4 billion SMS messages every day.
  • When people have something they want or need to do on their smartphone they will use text inputs if they have no other choice.
  • That said, avoid having people type any time you can, but don’t avoid text inputs when you can’t. Always encourage input, don’t limit it.
  • Think of people as one eyeball and one thumb when you design. Their partial attention requires a very focused design.
  • Think of a smartphone as a content creation device, not just a media consumption device. The most popular apps are content creation apps — Facebook, Twitter, Instagram, Draw Something.
  • Try to use the standard input types for mobile websites because they have been optimized for the operating system.
  • When you use standard input types, good things happen, because people already know how to use them. But don’t be afraid to go beyond the standard ones.
  • Try not to use select menus in Android if contents are longer than the screen because people may think their choice is limited to what is on the screen.
  • Try non-standard input types when there are too many taps, like the four required to use the select menu picker in iOS.
  • A stepper is easier than a picker if you have a small range (3 to 5) of numeric choices.
  • Only present input controls when people actually need them. Use progressive disclosure. Don’t hit them with everything up front in a long form.

Touch Target Size

  • Design for a physical size, not a pixel size, due to differences in screen resolution and pixel density. Apple, Android, and Microsoft have extensive documentation and recommendations.
  • Use a minimum spacing between tappable objects as recommended by the operating system developer.
  • Studies show that 80% to 90% of people are right handed, and that about 50% of left-handed people use their right hand to for their phone. Most apps can get away with being designed for right-handed users.

How to Make Input Less Error Prone

  • Use the correct keyboard version for email addresses, URLs, and numeric values like zip codes and credit card numbers. For mobile web this is supported by HTML5 input types.
  • Turn off auto-capitalize and auto-correct for login screens.
  • Use input masks to change people’s input to the correct format. For email addresses, use an input mask that puts @yourdomain.com at the end of whatever the user types and show the person this is what is happening.
  • Use smart defaults (for example, the no tax checkbox is selected by default on eBay mobile).
  • Top align field labels because of field zoom.
  • Don’t remove critical features, like password recovery, from a login screen.
  • Consider just showing the password instead of masking it as asterisks, or show it by default and give the user the option to hide it.
  • Apply the concept of “touch first” and only go to the keyboard when there is no other way to collect the information.

Mobile Web vs. Native Apps

  • It’s not about which is better, it’s about what’s right for the use context and business goals.
  • A mobile website has near universal reach; a native app is a much more richer experience (although HTML5 and jQuery Mobile are changing that rapidly).
  • Designers working on the mobile web should look at apps for examples of controls you could try on mobile websites. The creators of Android and iOS built new operating systems from the ground up so they have had to think about making controls better.
  • Many device features like geolocation and access to a device’s compass are now available to web browsers through APIs. Even greater access to a device’s hardware features is coming in the future.
  • Facebook and Twitter get half of their content from mobile devices, and half of Facebook’s mobile content is from the mobile web.
  • The more app usage occurs, the more mobile web use occurs, and vice versa. They both drive each other.
  • The more people engage with a brand through the mobile web or apps, the more they engage with the desktop experience. Recognize they are all part of a holistic experience.

Mobile Web Advantages

  • Cross-platform reach and near universal access with one code case.
  • Faster development time because well-known web technologies like HTML, JavaScript, and CSS are used.
  • Larger developer pool available.
  • You can update your app at any time and don’t have to wait for Apple App Store review or for people to download the app to get the latest features.

Native App Advantages

  • Deeper hardware access.
  • Multi-tasking.
  • App sales and in app sales.
  • Integrated access with other locations like stores is easier (at least today).
  • Faster performance because much of the UI is already on the device.

Design From a Mobile Mindset

  • If you approach a checkout flow from a desktop perspective you’ll just get a shorter form.
  • If you approach it from a mobile mindset you’ll think about whether or not this person is in a physical store with a device that has a camera and can scan barcodes. Mobile devices can streamline the in-store checkout process.

Voice/Audio Input and Proximity Sensors

  • Android allows voice input to any form that allows text input.
  • Apple has Siri, and it is rumored Apple may open Siri APIs to programmers at the Worldwide Developers Conference in June.
  • Shazam and IntoNow use ambient sounds around a person as audio input.
  • If you put an iPhone next to your face during a call the proximity sensor hides the keypad so you don’t “cheek dial”.
  • With proximity sensors “every object in the world is now an input”.

Device Sensors for Input

  • Instapaper speeds up or slows down scrolling speed when you change the pitch of the device, allowing people read at their own pace without swiping.
  • Nearest Tube uses device motion, GPS, and the compass to show nearest London Underground station.
  • Google Goggles and FitBit are also examples of using hardware features as inputs.
  • The Android Galaxy Nexus, the first phone to come with Android 4.0 installed, uses facial recognition for its Face Unlock feature.
  • A proposed addition to the GetMediaUser API would open this to web browsers.
  • While Windows 8 is a desktop operating system, it allows people to create logins by logging custom gestures on lock screen images, for example drawing a line from a child to a pet on the picture. This is a very human solution to login problems. It’s like telling the computer “Hello, it’s me, let me in.”

Gestures for Input

  • Multiple finger gestures: two-finger drag moves an object, three-finger drag moves an entire pane in an app, four-finger drag moves the user between apps, and five-finger drag invokes operating system functions. However, these are emerging pattern, not universal rules.
  • Teach in context to help people learn how the app works when they need to know it, not in some large upfront tutorial (the Clear app does both).
  • Use content as navigation to remove as much chrome as possible.

Luke Wroblewski is the author of Mobile First. You can follow him on Twitter at @lukew

Mobile UX Design With Rachel Hinman

This week I attended Rachel Hinman’s day-long workshop on The Mobile Frontier at the UX Immersion 2012 conference. The conference, a new gathering arranged by User Interface Enginnering, featured deep dives on mobile and agile development. Here are my notes:

There are Many Similarities Between Mobile and Desktop UX Design

  • Many of the tools and techniques we use are the same.
  • We sketch.
  • We prototype.
  • We need to learn what our users need and want.

But There are Also Differences

  • A phone is not a computer.
  • There is no sense of having windows or UI depth.
  • There is a smaller screen for user input and new inputs based on context and device sensors.

How a UX Designer Transitions to the Mobile Mindset

  • Buy a device and integrate it into your life.
  • Know the medium and become mindful.
  • Participate in the experience.
  • Brace yourself for a fast and crazy ride.
  • This is an emergent area of user experience so nothing we do will be constant for long.
  • Embrace ambiguity, it’s fun and exciting.

Context is complex but is essential to great mobile experiences

  • The mobile context is about understanding the relations between people, places, and things.
  • Relationships between people, places, and things are spatial, temporal, social, and semantic.

Designing for Contexts

  • Design for inattention and interruption.
  • The mobile use experience is snorkling, the desktop user experience is scuba diving.
  • Reduce cognitive load at every step in the experience.
  • Ideate in the wild — you can’t innovate in mobile from behind your monitor.
  • Ruthlessly edit content and features down to what’s essential.

Sketching

  • It’s a good way to develop ruthless editing skills.
  • You can change a design quickly at little cost.
  • No expert skills needed.

Prototyping

  • The exercise helps designers new to mobile who do not yet know the heuristics and constraints of the medium.
  • It’s essential for mobile UX because the medium is so new.
  • If you are prototyping for a desktop app and a mobile app, allocate to mobile triple the amount of time you devout to the desktop.
  • Prototyping helps you fail early and fast.
  • Because a mobile experience is so contextual and personal, explore techniques like body storming and storyboarding.
  • Prototyping is a great way to fail when it matters (and costs) the least.
  • Desktop prototyping is a luxury, mobile prototyping is essential.

Graphical User Interface vs. Natural User Interface

  • We are at a pivotal moment in the design of user experiences — the NUI/GUI chasm.
  • A GUI features heavy chrome, icons, buttons, affordances; what you see is what you get.
  • A NUI features a little chrome as possible and is fluid so content can be the star.
  • As UX designers we need to work to eliminate chrome, not make the chrome beautiful.

Motion as a Design Element

  • Animations and transitions can teach users how the information unfolds (see Flipboard).
  • Motion brings fun to the party, and who doesn’t want to have fun.

Rachel Hinman is the author of the forthcoming The Mobile Frontier. You can follow her on Twitter at @hinman

Respect Users’ Data

One of the immutable tenets of designing mobile user experiences is to respect (and protect) your users’ data. This means, among other things, saving form data as users move from screen to screen and eliminating the need for them to type the same information more than once.

Time Magazine iPhone App
Time Magazine iPhone App

Time Magazine either didn’t know or didn’t follow this tenet in the latest update to its iPhone app. When I launched the app for the first time after updating to version 2.2 I was shown an alert telling me that my customized settings had been reset and that I needed to redo them. To be honest, I don’t even recall what settings I may have customized (I download and explore a lot of apps and many, like this one, almost never get used after the first week). But I certainly wasn’t going to customize anything again if my settings could just be wiped out without a warning.

There are several reasons my settings may have been reset: a change to the underlying data structure that rendered them unusable, settings that I had customized had been removed, careless or rushed programming, or a simple bug that slipped through testing. If there was a legitimate reason, the app could have done a better job of letting me know why. While this may be a trivial matter for infrequent users, it could be a big deal to someone who uses the app regularly.

Sometimes apps have to change their business rules and functionality as they evolve. This is unavoidable. But app creators can manage these changes better if they start with a healthy respect for their users.

Sketchcamp Chicago

Work faster, not harder.

That was the message last week at the inaugural Sketchcamp Chicago conference. The one-day event, attended by about 75 UX architects, designers, and strategists, focused on tips and techniques for using sketching as a lightweight tool for user experience design.

Greg Nudelman's Amazon Sketches
Greg Nudelman's Amazon Sketches

My Amazon iPhone App Sketch
My Amazon iPhone App Sketch

In an exercise lead by Greg Nudelman, author of Designing Search: UX Strategies for eCommerce Success, participants were shown wireframes sketched on 3″ x 5″ Post-it notes of a search path on Amazon’s iPhone app. Nudelman then had us spend a few minutes sketching our own approaches, which included carousels, a scrollable gallery of images representing product categories, list drilldowns, and free text searches àla Google.

By the end of the exercise at least 7 different approaches were identified, showing that sketching allows for the quick expression of ideas without the encumbrances of tools like Omnigraffle or Visio. Attached to this post are Nudelman’s Amazon sketches and my take on using a carousel to represent product categories. My approach was far from optimal, but that illustrates the theme of the conference — sketching allows you to get ideas out of your head and into the world where they can be explored, refined, or discarded.

Another speaker discussed storyboarding as a way to communicate customer value to business stakeholders.

Digital and industrial designer Craighton Berman showed how he uses storyboards to illustrate user engagement and benefits in ways that a standard business plan cannot. The strength of storyboards is their ability to visually show how a product could benefit consumers in real-world situations and how well-designed products can create an emotional attachment for the people using them. Try communicating that in a spreadsheet. If a picture is worth a 1,000 words, a good storyboard may be worth 10,000.

Here are a few resources I’ve used for sketching user experience design:

Happy Sketching.

Safari Reader Improves Mobile Browsing

One of the little-mentioned features in Apple’s new iOS 5 is the addition of Reader in Mobile Safari. Reader, which was introduced in desktop Safari last year, allows a user to click a button in the browser address bar to render a webpage in a user-friendly, text-only format.

Reader instantly turns mobile webpages that may be poorly designed or have small fonts into elegant and highly readable pages. All ads, photos, and graphics are stripped from the page. Reader also merges articles that may be spread across several pages on a mobile website into a single scrollable page. And as with all things Mac, the handling of typography is excellent.

Reader is based on technology licensed from Readability, which also created a bookmarklet version for desktop web browsers and is embedded in the Amazon Kindle and popular iPad applications like Flipboard and Reeder.

Below is an article from the Chicago Tribune using the normal Mobile Safari display and Reader. I know which one I’d rather read.

Mobile Safari Reader
Mobile Safari Reader