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.


The Value of Flexible Prototyping

I recently experienced firsthand the power of flexible prototyping — and it is powerful.

I was doing in-lab, moderated usability testing of a mobile website experience and had reached that point where after a few participants you know you have a problem and the team wants to test a new solution. Our team’s visual designer — also a rock star front-end coder — offered to cook up a new prototype mixing the UI elements from the current site that tested well with participants with some design elements from our prototype that also seemed to be testing well.

The prototype in question was coded in HTML5 and jQuery, running on iPhones and Androids off Dropbox. After about 30 minutes, he came back to the observation room to say the new prototype was ready to go.

Because we were at the last test session of the day, we could only test the new design with one participant, so we certainly couldn’t say it was a design success. But it did eliminate the stumbling block we kept running into.

Perhaps more importantly, the experience reminded the team of the power of lightweight flexible prototypes that can be changed and deployed very quickly. Our approach to future test planning will be focusing on how we can change the prototype mid-test, which should open the door to a more adaptive approach to user research.

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:

Float Mobile Symposium at Techweek 2012

Yesterday I attended the Float Mobile Symposium at Techweek 2012 and heard a few interesting speakers. Here are my notes:

Designing for Device Independence

  • Size on-screen elements using physical units (points), and not pixels. Differences in pixel density make pixel-based sizing impossible.
  • As iPad-challenger tablets come along, and only a few (if any) succeed, expect screen sizes to solidify around a few sets of physical dimensions (7-inch and 10-inch). Expect less fragmentation in device screen size and aspect ratio over time.
  • What you display on a 7-inch tablet should not be a shrunken down version of what you display on 10-inch devices. Tailor your content for the 7-inch display if that is a large segment of your user population.

E-Learning in the Mobile Context

  • Mobile e-learning is not just migrating all your existing content to tablets and handhelds.
  • E-learning in the mobile space is about getting the right information to the learner at the right moment and in the right place.
  • Use gamification if it makes compelling content more engaging. But start with good content, because badges and leader boards don’t make bad content good.

Semantic Markup in HTML5

  • Use structural tags like <article>, <section>, <header>, and <footer> to help screen readers and search crawlers understand (and not just display) your content.
  • Semantic markup is unambiguous, accessible, and future proof.
  • As search engines like Google and Bing pull more of your content into their search results pages, semantic markup can place your content ahead of your competition.
  • Be open to evolving standards. HTML5 may be the last numbered version, at which point it becomes just HTML as an ever evolving specification.

Speakers included: Shay Howe, UI engineer at Groupon; Steven Hoober, author of Designing Mobile Interfaces; and Kris Rockwell, founder of Hybird Learning Systems.

HoverBar for iPad

HoverBar Front View
HoverBar Front View
HoverBar Back View
HoverBar Back View

Some tech products just look so sexy.

That’s how I feel about HoverBar from Twelve South, a really sharp add-on that uses a clamp to attach your iPad to an iMac, another external monitor, or a table top. I first saw this a few days ago when a colleague showed it to me and I immediately added it to my got-to-get-it geek chic shopping list.

To the average person, the $80 Hoverpad may seem like an unnecessary product. But if you are coding and testing a responsive web design that will be served to the desktop and the tablet, this is a great add-on. Pair this with Adobe Shadow and you have a pretty nice testing setup.

One bit of advice from my friend was not to use it if you plan on interacting a lot with your iPad because the arm may wiggle a bit when you press on the iPad screen. But it’s probably perfect for watching webinars, YouTube videos, or a baseball game (not that any of us would do that at work).

If it had an additional arm to attach an iPhone or Android phone, it would provide an even better testing setup. But it also would start looking like Doctor Octopus, and that may not help sales.

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.

Adobe Shadow Device Mirroring

Adobe Shadow on an iPad, iPhone, and MacBook Pro
Adobe Shadow on an iPad, iPhone, and MacBook Pro

I recently started using a new tool for testing website designs across different mobile device screens without the hassle of having to refresh each browser I’m using.

Adobe Shadow is a free tool from Adobe that allows you to mirror your desktop Mac or Windows computer to multiple mobile devices. You can pair your desktop to iOS and Android devices, including the Kindle Fire. Shadow can connect to an unlimited number of mobile devices.

Adobe Shadow works by running an application on your desktop computer and using a Chrome browser extension to connect the desktop browser with your mobile devices. Your desktop computer and mobile devices have to be on the same network. The device synching worked fine on my home Wi-Fi network but I encountered problems with my wireless network at work due to corporate security settings that block certain ports.

Once the computer is paired with your mobile devices, the mobile displays are updated in near real-time as you browse on the desktop computer. This makes it easy to test things like media queries or any conditional logic that is using the user-agent string to tailor the layout for that device. This is done by sending a command to the mobile device that contains the URL of the page being viewed on the desktop.

Shadow also allows you to do remote inspection and editing of the HTML or CSS and immediately displays the results on all your mobile devices.

There is a video demonstration of Shadow on the Adobe Labs website.

Cars.com Agile Transformation Webinar Notes

I participated in my first webinar recently, sharing some learnings from the Cars.com agile transformation. The webinar was sponsored by consulting firm ThrivingOrg and focused on what we learned during a 10-week series of pilot projects undertaken by several product teams. Here are some notes I prepared:

  • Transition from waterfall to agile was difficult at first for user experience team members because most of the techniques used by classically trained user experience people came from the waterfall world. Things like wireframes, a fully designed user experience and flow, and pixel perfect Photoshop comps don’t work well within the context of two-week working sprints.
  • Our profession needs to get better at using Lean UX approaches and shifting our work product to sketches, prototypes that can be used for documentation and user testing, and more lightweight guerrilla usability testing.
  • Interactions between agile product team members are very different than in waterfall project teams. Developers and UX people are working much more closely and more often now (and that’s a good thing).
  • Dedicated team co-location is essential. Having the product manager, UX and visual designers, and developers and testers near each other fosters frequent informal collaboration and reduces the number of structured meetings you need.
  • Daily standup meetings and co-location should drive greater appreciation of the other roles on the team and the constraints they are working under.
  • Failing is good. It shows you your limits and helps teach that an agile product team rises or falls together.
  • When first transitioning to agile, start with easier to implement features or even a backlog of defects. This allows the team to learn the process first without also having to worry about designing and developing complex functionality.

If you are new to agile software development and Lean UX, these resources can get you started:

Cars.com Agile Transformation Webinar Series

Cars.com product development team members recently took part in a series of three webinars sponsored by ThrivingOrg in which we discussed the different phases of our on-going transformation from waterfall to agile software development methodologies. The three webinars focused on three different phases of our journey, which is still under way.

I took part in the Phase II webinar, in which we discussed how we implemented a set of pilot projects to help us define an agile framework that would work for Cars.com. The pilots lasted several months and helped inform how we approached the later transition of all software development to the first iteration of our agile framework. An audio recording of the webinar is available through the ThrivingOrg website.

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