Email
Like
Liked ×
Save
Private Content
Embed
Loading embed code…
We have emailed the verification/download link to "".
Login to your email and click the link to download the file directly.

To request the link at a different email address, update it here. Close
Validation messages. Success message. Fail message.

Check your bulk/spam folders if you can't find our mail.
Loading

+ Follow

Tagged Mobile UX & Design

by Tagged Social

4,656 views

Mark Lieberwitz, Mobile Product Manager at Tagged, recently gave a presentation on UX Principles at a recent Designing & Developing for Mobile Workshop put on by AngelHack

Mark Lieberwitz, Mobile Product Manager at Tagged, recently gave a presentation on UX Principles at a recent Designing & Developing for Mobile Workshop put on by AngelHack

Accessibility

View text version

Categories

Technology

Upload Details

Uploaded via SlideShare as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

File a copyright complaint

11 Embeds 3,848

http://blog.tagged.com	3726
http://blog.tag-dev.com	87
http://blog.tag-stage.com	13
http://translate.googleusercontent.com	9
http://207.46.192.232	4
http://74.6.238.254	2
http://fanyi.youdao.com	2
http://cc.bingj.com	2
http://www.bing.com	1
http://27.123.194.35	1
http://engblog.tag-dev.com	1

More...

Statistics

Likes: 0
Downloads: 3
Comments: 0
Embed Views: 3,848
Views on SlideShare: 808
Total Views: 4,656

For years the tech industry struggled for a standard size to design for and we finally settled here. Everyone is familiar with this, we all design in 960, yes? This was fine for a while, although it ignores most other screen resolutions and doesn’t represent the real world. Jeremy Keith calls this ‘the consensual hallucination’.Design is the art of applying constraints until an elegant solution is created. 80% of the screen we designed for is GONE. This creates FOCUS.So let’s talk about focus and User Experience….
SW is focused on what customers want.Has anyone studied visual perception? Has anyone heard of change blindness?When two things are similar and only 1 or 2 things change people can’t tell the difference. So be aware of that concept when I make this transition, cause you might not see the difference. Let me do that again….
What’s on here?How does the airline make money? They sell reservations.Customers want to buy that stuff, they want to check their flight and manage their rewards….that’s it!Business goals + user needs – nothing else. There is no room, they had to get rid of all the crap and focus on what customers want, what the business is for. This is not, every single marketing initiative…it’s what is NEEDED.Know your audience: what are they doing and why? What is important….make it EASY.This deisng isn’t exactly viasually appealing, but it gets the job done and it has focus. So what else do we need to be aware of in designing for mobile?
Home – In between cooking dinner or watching TVPeople use these devices anywhere and everywhere.-Very distinct factor of mobile. When’s the last time you saw someone in line with their laptop? New Usage begets new UX.Because we can use anywhere, we have partial attention. You’re not sitting their for hours using these devices like a PC. It’s a one thumb one eyeball experience…focus on designing for a simple user experience. (think angry birds)This means we have to think about mobile design differently, there’s a short attention span for people using mobile. Think about going to see a movie you really were looking forward to on a huge IMAX screen and you’re sitting next to a guy with a really terrible laugh.Mobile is personal….you’ve got all these things that are specific to mobile. Device is ALWAYS with youSmall ScreenBattery is going to dieNetwork is inconsistentIncreasingly use fingersEnvironmental SensorsLocationDirectionAmbient Light SensorCan call / text everyone you knowThese things together make the device much more personal:It changes the equation when we design for stuff based on these agronomical factors.
Mobile is about speed Things are generally slower on mobile. Give the user an indication something is happening…a spinning wheel, blinking ‘loading’ icon…this makes it feel like the app/site is faster than it actually is.Speed is one of the top concerns in mobile designTry to design for a slow-medium connection speed (strike a balance)Design for 3G, not necessarily WiFi connectivityCalls to the serverImage sizeReduce the amount of contentMobile web: Reduce number of new page loadsSimple & focused UX (KISS)Single column layouts tend to work wellMinimize text entryAuto-fill, dropdowns, pinwheels, lists, calendar picker, etc. – If you want the user to type something bring up the keyboard right away, don’t make them click for it.Copy Paste This is painful on mobile (describe experience), use a ‘mail-to’ instead and allow the user to use the mail client to post the link…this pops an overlay over the browser and is a great experience everyone is used too. This may be bad on the desktop, but it’s great on mobile.Quotes:Design is the method of putting form to content.- Paul Rand Design is the stuff around the end result.- Mark Boulton
What we need to realize as designers is that we don’t have control. This is hard for designers…we LOVE control.But users can access our content in any amount of ways; RSS, Print, desktop, laptop, mobile devices, aggregate websites that use iframes, twitter, facebook, tablets, the list goes on and on…and we don’t always have control over how our content displays or is consumed. Once we admit this to ourselves it’s easy to see why responsive design offers a great answer to the question of How our content is consumed on the three major platforms. When talking about mobile many people use the term mobile web. But I ask you, is there such a thing as mobile web? Stephen Hay wrote an essay titled “There is no Mobile Web” in which he stated….Most sites on the web are not built with specific mobile use-cases in mind. However, millions of people access these sites every day through mobile devices. They access a “normal” (whatever that means) website through their “mobile” device.Stephen HayWhat makes a design responsive?Flexible GridsFlexible Images / MediaMedia Queries (CSS3) …but design isn’t just about layout.Design is the method of putting form to content.- Paul Rand Design is the stuff around the end result.- Mark Boulton
This way of thinking has been around for some time, but we need to adapt it to today’s world. This means designing for the base use case and then adding to the experience as the device the user is accessing our content on becomes better enabled….we can then layer on more and better tools and experiences where they add value to the user. This way of thinking brings us to my last point….
Luke has written a book called Mobile First and has also given numerous presentations which are available online. I highly recommend you read his book or look into these presentations as they can be eye-opening. Especially for friends of ours in the industry who still aren’t convinced that mobile is the future or don’t know how to react to the new paradigm we’re in.Mobile first allows us to design for the base use case and add more value to the user experience as we design upward for devices that are more enabled by screen size or JavaScript or CSS capabilities. It also allows us to design specific use cases for mobile and tablet devices which have capabilities that desktops simply don’t have. It’s a new, potentially scary, way of thinking (especially for a successful business that has been web driven from the outset). But we as an industry need to change with the times and design for how users want and need to interact with our content. That means changing the way we think and design to provide a better, broader and adaptable experience that responds to any use case users might have.So how do we tie this all together? …
Any questions?

Tagged Mobile UX & Design Presentation Transcript

Mobile User Experience Principles Mark Lieberwitz Mobile Product Manager at Tagged, Inc.
1024 x 768 320 x 480
Where are we using? Anywhere & Everywhere84% at home80% misc. times74% waiting in lines Mobile is Personal64% at work
Mobile UX Tips & TricksIt’s about trade-offs…• Focus on speed• Reduce the amount of content• Simple & focused UX / UI• Minimize text entry• The fat finger use case• Create an experience (make navigation easy)
Responsive Web Design
Progressive EnhancementRather than hoping for gracefuldegradation, progressive enhancement buildsdocuments for the least capable or differentlycapable devices first, then moves on to enhancethose documents with separate logic forpresentation, in ways that don’t place an undueburden on baseline devices but which allow aricher experience for those users with moderngraphical browser software. - Nick Finck & Steven Champeon coined the term in 2003
Mobile FirstIf you design mobile first, you create agreement onwhat matters most. You can then apply the samerationale to the desktop/laptop version of thewebsite. We agreed that these were the mostimportant features and content for our customersand business – why should that change with morescreen space? - Luke Wroblewski