You got Mobile in My Desktop: How Mobile Devices are Changing our Interactions With the Web
Upcoming SlideShare
Loading in...5
×
 

You got Mobile in My Desktop: How Mobile Devices are Changing our Interactions With the Web

on

  • 1,330 views

Intridea's UX and Mobile team's presentation at MobileUXCamp DC September 17, 2011 ...

Intridea's UX and Mobile team's presentation at MobileUXCamp DC September 17, 2011

You got Mobile in My Desktop: How Mobile Devices are Changing our Interactions With the Web

Modern mobile devices (smartphones and tablets of course) have been teaching users new ways of interacting with data. For the first time since the introduction of the point and click interface 30 years ago, users are interacting with a computer in a brand new way. The mouse is becoming an artifact, and so its usage patterns are going the way of the dodo and the light pen. Hear about how the computer in your pocket is informing the computer on your desk, and why the days of designing for one or the other are rapidly coming to a close.

Statistics

Views

Total Views
1,330
Views on SlideShare
1,310
Embed Views
20

Actions

Likes
2
Downloads
10
Comments
0

2 Embeds 20

http://paper.li 16
http://lanyrd.com 4

Accessibility

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • Information migrates to the top, multiple columns of content, ads inline, interstitials\n
  • \n
  • \n
  • The fold. All of your most important content had to appear in the first 7 or 800 pixels at the top of the screen or no one would see it. This lead to a slow but steady migration of EVERYTHING to the top and bottom. Ads, login links, profile links, search bars, navigation, mastheads, category nav, menus, etc. all made a run for the top.\n\n
  • All of your most important content had to appear in the first 7 or 800 pixels at the top of the screen or no one would see it. This lead to a slow but steady migration of EVERYTHING to the top and bottom. Ads, login links, profile links, search bars, navigation, mastheads, category nav, menus, etc. all made a run for the top.\n\n
  • \n
  • There aren’t any more folds worth noting. Most devices only have 400 px at a given time and are width constrained. So we prioritize. Login/Signup screens move to the first in a stack, inboxes are in their own tab with a visual indicator for “look at me”, integrated search bars take up 20 or so px and that feels like a lot. The idea of packing a UI full of every little ad and link will quickly ruin your presentation and make it look like noise. \n\n
  • \n
  • Because lists update chronoloically, it follows that there might be more if you crane your neck to look over the top of the fence, pull to refresh allows you to do just that.\n\n
  • Checkboxes on the web were boxes that you could click to check. Didn’t really map to checking off a checkbox in a notepad, but it looked similar...the mobile space is teaching us that using your hands is more fun when the UI acts like things your hands do.\n
  • Again, realestate made developers and designers consider how to best utilize limited space and in the case of the flash message, we see that the “temporary alpha overlay” and the “Flash message” in rails are cut from the same “Don’t be invasive” cloth. They can be thematically linked to the UI, and are more than just giant red text with asterisks.\n
  • Navigation is a tool. Its a utility UI element that is generally considered to be a workhorse to let users know where to go. Because real estate is so limited on mobile, we’ve seen a migration starting on mobile to have thematically interesting elements on navigation to take that tool and make it part of the look and feel\n
  • Tabs used to be a boring transposition of a filing cabinet into the webspace UI, now its a slick, clear, navigation where the “Folder” comes alive.\n
  • Information migrates to the top, multiple columns of content, ads inline, interstitials\n
  • Space is a premium. Content is king. Show pretty pictures, but remember that you’re building a tool to assist someone in consumption, Dyson made vacuums pretty even tho they were tools, mobile is the same. One column, not a lot of room for other screens.\n\n
  • Here is a smattering of apps that we work on in-house. Note that they are all focused UIs but serve a wide array of purposes.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Twitter on the mac already has pull to refresh. Lion allows you to do a fullscreen takeover. UI and engineers have a much greater understanding of the nuclear bomb of simplicity that mobile has taught users. No longer will users patiently search for navigation, it should be buttons or clearly marked. If an element takes up a significant amount of space, it must be important. Note that one of the most common pieces of feedback that we receive from users on mobile interfaces is that the small “i” icon for information or help on a screen (20x20 or so) is too small to notice. I suspect that this may be a good thing, because if users can’t find the help button, it makes you think about usability more thoroughly.\n\n
  • Your app or website is a set of big blocks that work together. The concept of “a house” is important here. As adults, we see a house as a brick building with 6 windows, a door, a motion detector light, stairs, and a lawn. When a 6 year old draws a house, they really make it clear: a box with a triangle roof, some grass, two windows, and a door.\n \n\n
  • \n

You got Mobile in My Desktop: How Mobile Devices are Changing our Interactions With the Web You got Mobile in My Desktop: How Mobile Devices are Changing our Interactions With the Web Presentation Transcript

  • You Got MobileIn My Desktop Mobile UX Camp DC — 09/17/2011 Copyright 2011, Intridea Inc. All Rights Reserved.
  • Quick Note:David Evans Couldn’t Make it Today :(We’re filling in for our Director of Mobile, David Evans, so please bear with us Copyright 2011, Intridea Inc. All Rights Reserved.
  • Who We Are & What We Do Copyright 2010, Intridea Inc. All Rights Reserved.
  • Company Background • Intridea = Interactive + Ideas • Founded in 2007 in Washington, DC • Expertise: Design & Usability, Agile Development, Ruby on Rails, Social Media, Enterprise 2.0/Web 2.0, Mobile Applications, Collaboration Technologies, Corporate Communications • 50+ Full-time: Web developers, Software Engineers, UX & Interface Designers, and Business Application Professionals Copyright 2010, Intridea Inc. All Rights Reserved.
  • Where the Web Was Copyright 2010, Intridea Inc. All Rights Reserved.
  • “The Fold” Copyright 2010, Intridea Inc. All Rights Reserved.
  • Where We Are Copyright 2010, Intridea Inc. All Rights Reserved.
  • No Folds Barred Copyright 2010, Intridea Inc. All Rights Reserved.
  • Some Examples Copyright 2010, Intridea Inc. All Rights Reserved.
  • Pull to Refresh Fun game Welcome to the Desktop Copyright 2010, Intridea Inc. All Rights Reserved.
  • The All-New Checkbox Old and Busted New Hotness Copyright 2010, Intridea Inc. All Rights Reserved.
  • Rise of the Flash Web Mobile Copyright 2010, Intridea Inc. All Rights Reserved.
  • Navigation as Fashion Pure Navigation Wood. Like a Bookshelf. Copyright 2010, Intridea Inc. All Rights Reserved.
  • Tabs Web Mobile Copyright 2010, Intridea Inc. All Rights Reserved.
  • How to View a (nearly infinitely) Copyright 2011, Intridea Inc. All Rights Reserved.
  • How to View on Index Card of Data Copyright 2011, Intridea Inc. All Rights Reserved.
  • Our Work • Enterprise Deployments • News Readers • Ratings & Reviews • Micro-blogging • Citizen Reporting • Location Based Services • Location Positioning • Augmented Reality • Social Network Integration • Third Party APIs • Multi-lingual • More... Copyright 2010, Intridea Inc. All Rights Reserved.
  • Mashable Copyright 2010, Intridea Inc. All Rights Reserved.
  • Oilreporter.org Copyright 2010, Intridea Inc. All Rights Reserved.
  • Tradui App Copyright 2010, Intridea Inc. All Rights Reserved.
  • Voice of America PNN Copyright 2010, Intridea Inc. All Rights Reserved.
  • Car Finder App Copyright 2010, Intridea Inc. All Rights Reserved.
  • Where AreWe Going? Copyright 2010, Intridea Inc. All Rights Reserved.
  • How Do I Explain This to My Clients? Copyright 2010, Intridea Inc. All Rights Reserved.
  • Q&ACopyright 2010, Intridea Inc. All Rights Reserved.