Design, Data and Mobile in the Age of Multi-Device Users

an-event-apart

I had the chance to attend An Event Apart this past August in Chicago. This inspiring two-day conference was founded by Eric Meyer and Jeffrey Zeldman, aka the rock stars of the web!

I was highly impressed by the quality of the presentations and I’ve never felt more excited about the future of the web as I do now.

We have many challenges coming our way as designers and developers. I believe it is our duty to make the web accessible, while maintaining a healthy amount of magic and lolz.

Here are the highlights for those of you who couldn’t make it:

image01

Jeffrey Zeldman on the Ten Commandments of Web Design

  1. Entertain
    Mix fun with usability. Add a visual touch to warm up a boring copy section.
    For example, on Flickr’s previous  website, you would be greeted in a different language every time you logged in.  MailChimp has a monkey in the header that likes to share funny YouTube videos or tips.

  2. Test Everything
    Test on real mobiles devices. Start an Open Device Lab in your town.

  3. Iterate
    Iteration never sleeps. Everything on the web is beta.
    Move things around, do tests when things don’t work and find out what really works. Never assume. Always try first.

  4. Ship!
    If you can’t delegate at the pixel level, you’ll never ship.
    The best-in-class software, applications and websites out there were “first to ship”  allowing for elaborate testing and improvements as they grew.

  1. Engage the community
    Don’t make your site a passive experience for visitors, immerse them in it! Let them interact with your content, tweet as a comment if it’s what they prefer, or have a section that allows them to share how they’ve used your services to help their business.

  2. Love thy users
    Just because the screen is smaller doesn’t mean you should skimp on content when doing responsive design. Visitors should have access to the same rich content across devices.

  3. Remember the content
    Base your responsive design on the content and font styles that you use.

  4. Don’t try to be perfect
    Instagram delivered the fastest picture sharing platform, and even if there are some slight imperfections, they still provide a global user experience you don’t find anywhere else. Concentrate on what makes you stand out and what you solve/create.

  5. Be true
    Don’t put content that is not necessary. What is the mission of your site?

  6. This is design, not religion.
    Test, test, test. Try, try, try.

 

image03

Jason Santa Maria on the Nimble Process: Think Before You Design

At what point do you start working in a browser instead of Photoshop? Learn how getting ideas out quickly through prototyping, sketching, and iteration can help you work and test more quickly, while also working smarter.

Jason’s presentation pushed us to take a step back and review the way we actually approach designing websites.

I’m sure for many of you out there, the “old” work process probably looks familiar:

The Old Process

Plan > Design (in Photoshop) > Code > Launch

Now compare it to Jason’s process:

The New Process

Plan / Code + Design + Code + Design + …. / Ship

Basically, you should be able to test any idea that comes to mind to find the best match for its context. I think it’s brilliant!

How to “think before you design”:

  • Grids are an awful place to start a design. You shouldn’t be trying to fill empty squares. You should be figuring out what is going to be this page.

  • Draw on paper. Sketch out all the ideas you’re imagining. The first ones will be the most obvious and the last ones should be your most interesting.

  • Whenever possible, start with the content. It’s the core.

  • Use the Grey Box Methodology
    Design UX in real screen sizes and only show high level page previews.

  • Prototypes are documentation

Words to chew on: It’s easier to revise than to create

image02

Jeremy Keith on The Long Web

New frameworks, processes and technologies are popping up daily. Let’s see which design principles and development approaches have stood the test of the time.

Main takeaways:

Content first

Start designing with URLs in mind. If you can define the URL structure of your website, you can define your website.

Inputs and HTML5

Start using input types (email, search, etc…) now! If the browser is too old, it will fallback to a simple text input. Read about inputmode=”numeric” and pattern=”[0-9]” which will make mobile/tablet browsing way simpler. You can also start offering value options in a simple text input with datalists!

Progressive Enhancement

Test your sites without Javascript on. An error in Javascript can break an entire web page. Keith says, “If you have a button, use a button. If you have a link, use a link.” Do not replace fields with elements that are dependant on Javascript, such as spans and divs.

Show the password?

It would seem that showing the password in the input (with a checkbox to hide the text on demand) renders more conversions.

image04

Adrian Holovaty on Delightful Details

Learn from dozens of UI examples from a variety of contexts and explore how and why they work. You’ll come away with specific techniques you can use in your own work, along with inspiration to sweat the small stuff.

Great Examples of Proactive Information i.e.Delightful Details

Time

Time is always of the essence and there are interesting ways to relay business operating hours.

  • Google Search provides information about business hours on the actual day the search is being performed.

  • Google Maps provides astronomically correct shadows based on the time of day and sun. Just check with Maps to find a sunny spot for a picnic this afternoon!

Idea

Give your users the gift of time. Provide your exact local time to helps visitors know when they can reach you.

When your store is closed, you could feature a sentence like:

You are welcome to come visit us tomorrow from 10am to 5pm at 75 (Address).

Weather

  • The Facebook Events page shows the weather of a particular date and time so that you can plan accordingly.

Holidays

  • Google Voice can give you holiday reminders, like “Call Dad” on Father’s Day.

Idea

When sending a product/gift, you can include a notice of the next holiday coming up (Mother’s Day, Father’s Day, Valentine’s Day, etc…) and what they should stay tuned for.

Error Handlings

  • If you send a message in Gmail mentioning that you have attached a file and nothing is attached, it will alert you before sending the email.

  • If you create a Google account and type too many dots in the email field, an amusing error message is displayed.

  • At Yahoo!, if you’ve accidentally set your date of birth to an upcoming year, it asks, “Are you from the future?”.

  • On Mint.com, if you type your subject line in caps, it says “EASE UP ON ALL THE ALL CAPS IN YOUR TITLE, it looks like you’re shouting.”.

  • With Kicksend.com, if you make typo like “gamail.com” instead of “gmail.com” in the email field, a “Did you mean email@gmail.com?” will show. This technology is available with mailcheck.js which is awesome for newsletter lists!

Idea

Get QA involved with UI for copy on error pages since they know more than anyone what kind of crazy situations can happen on a website.

Inferences / Predicting What Users Might do Next

  • When you sign out of Twitter on a desktop, Twitter proposes mobile options to encourage you to continue using their product on-the-go.

  • On Flickr.com, when you right-click a photo, it shows the copyright information as well as the download link, assuming that you might want to save the photo.

User Education / Use Edge-Case Situations as Teaching Opportunities

  • In Google Chrome, if you clear your cache more than once, it suggests Incognito Mode. Show your users there are better ways to use your product.

  • On SoundSlice.com, if you CTRL+S or CTRL+Z, popup messages will appear to educate the user about features they might not know about (auto-save) or features coming up (undo).

Squishiness

  • The smaller your space is, the smaller some content should be. For instance, with dates try 3/09/27 instead of “September 27th 2013”. For form submit buttons try “Go” instead of “Submit”.

More Inspiring Examples

  • YouTube shows a popup mentioning an upcoming show in your city if you’re watching a video of a band.

  • Foursquare’s home page preloads your city’s map as a background image to confirm your location.

  • Yelp! search changes the filter option to “blocks” in NYC instead of “miles”, as it does for the rest of the United States.

  • On Soundslice, testimonials are fed by tweets! A cron job saves favorited tweets on Twitter and adds them to the testimonials database. That means more up to date content, featured daily!

 

image05

Karen McGrane on The Mobile Content Mandate

Don’t create content for a specific context. You don’t get to decide which device people use to access your content.
They do.

Karen gave an impressive and powerful presentation on the current state of mobile in the United States.

Here are some critical statistics:

  • 20% of Americans have no internet access at all

  • 35% have no internet access at home

  • 29% of black americans have no internet access

  • 51% have no broadband access at home

  • 32% of hispanic americans have no internet access

  • 49% have no broadband access at home

  • 38% of low-income americans have no internet access

  • 59% have no broadband access at home

  • 46% of americans with a disability have no internet access at home

  • 59% have no broadband access at home

  • 57% of americans with a high school diploma have no internet access

  • 88% have no broadband access at home

These statistics shed light on a user we need to incorporate much more into our web development strategies: the mobile-only user.

With smartphones finally reaching very affordable prices on the market, people don’t need to spend thousands of dollars on desktop computers and they clearly aren’t.

With this in mind, here are a few more statistics:

  • 44% of the Fortune 1100 don’t have a mobile website

  • 84% of consumer brands don’t have a mobile strategy

  • 80% of B2B brands don’t have a mobile strategy

So what should you do about it?

  • Don’t make your mobile website better. Make your website its very best across any device. (Example: The Comcast mobile website is better than the desktop version)

  • Make your headlines and summaries work. Instead of truncating text, preset an array of widths that are acceptable. Leave the programming limits out and get your copywriters to write real content that fits.

 

image00

Luke Wroblewski on It’s a Write/Read (Mobile) Web

What lessons can we learn from the web’s inner workings as we move to mobile-driven, multi-device Internet?

Design For One Handed Use / Mobile

What we need to do to design is to look at the extremes. The middle will take care of itself. -Dan Formosa

How far can you get without making the user have to bring the keyboard into the process? Give them the option to enter data but also show a list of possible answers that can get selected easily and best match what the user was looking for.

Focused Flows / Mobile

Creativity is people who care enough to keep thinking about something until they find the simplest way to do it. -Tim Cook

Hotel Tonight is a great example of simplifying a booking process. It takes 4 taps/swipe + 8 seconds compared to Priceline with 52 taps + 102 seconds or Hotels.com with 40 taps + 109 seconds.

One of the steps they simplified was to request photos for each room instead of having a text review.

It takes big changes to go small.

Just In Time Actions / Mobile

Move buttons depending on the action being done. Hide or add elements depending on what the user is doing and might need during that action.

Cross Device Usage

It is also important to review how our websites work across multiple devices. Luke defines the cross-device usage through 4 levels:

Access / Flow / Control / Push

  1. Access
    Continuing a process across devices.
    Example: A book between Kindle apps, a Google Maps search, an article in Chrome

  2. Flow
    Real-time interaction between screens.
    Examples: A Google Drive document being edited. Google Racer between multiple devices.

  3. Control
    Allowing one screen to become the control of another device

  4. Push
    One device sends data to the other.
    Examples: AirPlay from Apple. eBay getting photos from the phone to the site.

Other Speakers Worth Mentioning

I was blown away by the CSS tricks Lea Verou shared with us in her Deep CSS Secrets presentation and I highly recommend to check out her book CSS Secrets which should be coming out in 2014.

Brad Frost also impressed me with his Atomic Design presentation and the Pattern Lab he created. He gives you the methodology to implement your very own design system in order to set you, your organization and clients up for success. (Remember his article titled The Post PSD Era and the debate it started?)

Kristina Halvorson might be the funniest speaker I have had the chance to see yet! She shared insights about how curiosity, empathy and shared ambition will help us all build a better web in her Content/Communication presentation. Check out her book Content Strategy For the Web.

If I could, I would have covered all the speakers but this post would have never ended. Check them out here because they all are worth discovering!

What do you think of the future of the web? What steps has your organization implemented already to support multi-device users?

This article was originally written by Sofia Shendi

Share this article

Leave a Reply

Please type the characters of this captcha image in the input box

No comments

No comments yet.