Week 10

Topics: Interaction Design Basics, Mobile Web: What are current best practices?, Mobile Critiques, What is Social Media?
Studio Experiment: Create a “sketch” of an interface for the web project (home page only) for your final project. Think about how the website is used and ways in which you can create a “simple, compelling mobile web experiences that satisfies a real need.”  You may use this iPhone GUI (Graphical User Interface) PSD file if you would like to create the sketch in Photoshop. Post your thoughts and decision-making process for this exercise on your WP blog. Bring your sketches to our next class.

Reading for For Next Week
Designing for Interaction: Chapter 7: “Smart Applications and Clever Devices” (pg 151-171)

Also, by next week, create a Twitter account for yourself for this class. (I will discuss in class.) The Twitter profile for this class is accd_id01. Please follow this profile. We’ll be exploring the uses of micro-blogging over the next few weeks. Suggested user name for profile: “yourname_id01.” If you already have a Twitter account I’d like you to create a new account for this class.

On Twitter, please follow these: @DesignerDepot @gracesmith @sitepointdotcom @brendandawes @kickerstudio @smashingmag  Choose at least 3 more to follow before our next class. Also be sure to follow your fellow class mates’ Twitter profiles.

Interaction Design Basics
The Laws of Interaction Design (pp. 52-59)

Moore’s Law: “Every two years the number of transistors on integrated circuits (a rough measure of computer processing power) will double.

Fitts’ Law: “The time it takes to move from a starting position to a final target is determined by two factors: the distance to the target and the size of the target.

Hick’s Law: “The time it takes for users to make decisions is determined by the number of possible choices they have. A user will more quickly make choices from one menu of 10 items than from two menus of 5 items each.

The Magical Number of Seven: “The human mind is best able to remember information in chunks of seven items, “plus or minus two.” We have difficulty keeping more than that amount of information in our short-term memory.”

Tesler’s Law of the Conservation of Complexity: “Some complexity is inherent to every process. There is a point beyond which you can’t simplify a process any further; you can only move the inherent complexity from one place to another.

The Poka-Yoke Principle: “Mistake proofing: avoiding (yokeru) inadvertent errors (poka). Designers use poka-yoke when they put constraints on products to prevent errors, forcing users to adjust their behavior and correctly execute an operation.

Direct Manipulation: “The process in which, by selecting a digital object with a finger or mouse or some other extension of the hand, we can then do something ot the object; move it, turn it, drag it to the trash, change its color, and so on.”

Indirect Manipulation: “We use a command or a menu or other means that isn’t directly a part of the digital object to alter that object.”

Feedback: “Every action by a person who engages with the product or service, no matter how slightly, should be accompanied by some acknowledgment of the action.”

Feedforward: “Knowing what will happen before you perform an action. Allows users to perform an action with confidence because it gives an idea of what will happen next.”

Best Practices for Mobile Web

The best practices discussed here are a set of recommendations given to improve the user experience of the Web on mobiles. These are only recommendations, you are not obligated to use on your site but, using, the user experience will be more enjoyable.

The best practices are grouped by topics:

Overall Behavior

Thematic Consistency: The website must ensure that the consistence of its content will remain regardless of the device used to access it.

Exploit Device Capabilities: Conform the website to the capacity of the devices and use them viewing to offer a better navigating experience.

Work around Deficient Implementations: It’s possible that some content aren’t viewed in the same way between different mobile browsers. It’s suggested that the developer take reasonable steps to work around deficient implementations.

Testing: Test on different emulators as well on actual devices.

Navigation and Links
URLs of Site Entry Points: Keep the URL address short. Due to restrictions on the keyboard of mobile devices, typing long address might be a difficult task.

Navigation Bar: Provide the navigation at the top of the page and only necessary information. It’s important to the user see the whole content without scrolling.

Balanced Structure: Perform a balance between the quantity of links visible on a page and the amount of clicks the user needs to access what he is looking for.

Navigation Mechanisms: Provide consistent navigation mechanisms.

Access Keys: Assign access keys to links in navigational menus and frequently accessed functionality.

Link Target Identification: Clearly identify the target of each link. Note the target file’s format unless you know the device supports it.

Image Maps: Do not use image maps unless you know the device supports them effectively.

Refreshing, Redirection and Spawned Windows: Do not cause pop-ups or other windows to appear and do not change the current window without informing the user. Do not create periodically auto-refreshing pages, unless you have informed the user and provided a means of stopping it. Do not use markup to redirect pages automatically. Instead, configure the server to perform redirects by means of HTTP 3xx codes.

Externally Linked Resources: Keep the number of externally linked resources (images, style sheets and other objects) to a minimum.

Above material from Mobile Web Best Practices 1.0., W3C Recommendation 29 July 2008

Best and Worst Of The Mobile Web

[W]hat sells the mobile Web is not how it is similar to the desktop Web, but how it differs. “The mobile Web is a phenomenal platform to build and exploit applications. But until even we, the industry who build them, stop thinking of it as primarily “the Internet on your phone,”both users and clients will see it as little more than a poor man’s browser…

Gaddo F. Benedetti, “Mobile First, Web Second,” http://dev.mobi/node/156.

Read this for next week: Best and Worst Of The Mobile Web

The principles of great mobile websites:

  • You need to have one
  • Make sure it actually works
  • Solve a real problem
  • Maintain laser focus
  • Content is king…but in small bites
  • Simplify, but don’t over-simplify
  • Make your site findable
  • Make your site device-aware
  • Remember the user’s details
  • Break free from .com thinking
  • Put the mobile website first
  • Don’t be bound by templates
  • Test and learn

“ There are no real right or wrong answers to utilizing mobile. Testing and learning is key.”

Above material from mobiThinking. This article is © dotMobi 2009. All rights reserved.

Mobile Critiques

Twitter: http://m.twitter.com/twitter
BBC: http://www.bbc.co.uk/mobile/index.html
ESPN: http://ESPN.mobi
YouTube: http://m.YouTube.com
The Weather Channel: http://weather.mobi

Challenges associated with the mobile web

The mobile web has always been confusing and difficult for many people to get used to developing for, due mainly to lots of over-hyped jargon and terms that the average web developer has never seen or needed to deal with. Things like content carriers, WAP and the deck, many of which aren’t really relevant to the subject area any more. When we create traditional HTML websites, we simply upload them to our server space with our Web-hosting provider and that’s it. It didn’t matter if the customer was coming from America, Europe, Asia or elsewhere, or if they were on a dial-up modem at home or a super-fast fiber optic connection at a University; all the infrastructure between your Web site and the customer’s desktop computers worked the same way every time.

This is not true when we are talking about mobile devices accessing the Web. In the world of mobile carriers, different companies use different hardware for their cell towers, they compress the data differently or not at all, and factors like signal strength and availability can vary a lot. This is before we even get to the capabilities of the software on the device itself!

While that sounds daunting, you shouldn’t let it scare you. As a web developer or designer, all you need to understand to create your Web site in a mobile friendly way is that there are some considerations you need to take into account. These limitations include styling, scripting and thorough testing on a variety of devices. Your existing skill-set for creating traditional web sites is much the same as for mobile web sites. The rest of this article will summarize all of these points to help give you a feel for the topic and address all of the areas to consider. Future mobile articles will give these areas a deeper treatment.

Mobile limitations

While creating a site that will work on mobile devices largely involves sticking to the same web standards and best practices as you need to use for desktop browser-compatible sites, you still need to consider the limitations imposed by such compact devices. While the mobile infrastructure is getting better and more devices are equipped with WiFi, there are still some issues. Hopefully, over time, the following points will become obsolete, but for the near future these are still critical considerations today, and will remain so for some time. You must realize that the capabilities of mobile devices differ greatly and that the top of the range smartphones, such as the iPhone, HTC Touch Diamond and Samsung Omnia (and other S60 and Windows Mobile-based phones), constitute only a small percentage world-wide of the overall Web-enabled phone population.

Screen size/resolution

For those of you too young to remember, there was a time when you would visit a Web site and they would have a small disclaimer along the lines of Best viewed in Netscape Navigator at 640×480. You couldn’t guarantee the higher resolutions we take for granted today. On mobile devices, screen resolutions still vary greatly, and this doesn’t look as if it will change any time soon.

When constructing a mobile version of your Web site, how can you be sure that your design will work across the different screen resolutions and dimensions? The simplest strategy is to keep your layout as simple and fluid as possible. The ultimate ideal is to keep your page contents all in a single column stacked on top of each other, so no matter how wide or skinny the screen resolution is, the information simply wraps. You will need to test how well your design works with and without CSS and JavaScript.

Using CSS media queries, JavaScript or the viewport meta tag, it is possible to send some CSS targeted specifically to mobile devices without any server-side coding. You will learn more about these later on in this series of articles.

Input mechanisms

Mobile devices have very different methods of input than desktop machines. When you are at work, your desktop machine probably has a full QWERTY keyboard, a multi-button mouse, possibly a number pad, etc. On a mobile device, you might only have a number pad. You can’t guarantee a full QWERTY keyboard or a pointing device. This makes data entry, even cycling through links, a different experience than when at a stationary desk.
If you have built your Web site using progressive enhancement, then its functionality should not depend on any of these advanced input devices, but should be accessible to everyone using just about any form of input device.

Processing power and available memory

Mobile devices generally have less memory than their desktop brethren. This creates limitations in the amount of processing they can handle, which limits implementations of JavaScript, Flash and other technologies. These tend to drain batteries, create a slower user-experience and increase the bandwidth – this last point can increase the cost to the user of downloading your web content if they are paying by the kilobyte, which many are. As we’ll see later, these processor limitations account for the mobile web’s evolution along the XML path rather than the HTML/SGML path.

Available fonts and colours

On your desktop computer, you can happily install all sorts of fonts and families, from serif to san-serif, from symbols to wingdings, but on mobile devices, you are not so privileged. Some devices have as few as one standard fixed-width font, and perhaps a bold or italic variant. This makes corporate branding a nightmare. Not to mention all your nicely designed navigation items in variable width fonts looking bad!
Along with limited fonts, some devices have a limited colour palette, although this is less of an issue now – most new phones come with thousands of colours, and monochrome phones are rare now.

Web standards support

Not all phones are equipped with web browsers that share the capabilities of today’s modern desktop browsers. Some have full support for the common Web Standards like HTML, CSS and JavaScript. Some only support a certain subset of these standards or use different standards entirely (see the next section for a discussion of WML, cHTML and XHTML-MP). Some support HTML, but not CSS or JavaScript. Other mobile browsers such as Opera Mini use a proxy system in which a server farm retrieves the requested web page, optimizes and reduces it in file size, then sends it to the browser for display.

The strategy here is to test, test, test, and make sure your Web sites degrade gracefully on lower-capability browsers.

Note: that you can test web sites on Opera Mini using the Opera Mini Simulator if you haven’t got a phone handy.

Above material from Introduction to the mobile web, Dev.Opera 23 June 2009

What is Social Media?

The best way to understand a new media is to compare it to what’s come before? So, what kind of media do you have lying around your house? Probably these:

A box of photos.
Physical, paper mail and catalogs.
Yellow Pages.

What are some attributes of “social media” or “new media” that are different than any of the “old media” above?

  1. The media above cannot be changed. A newspaper can’t magically change its stories, even if society decides something in them is incorrect. A blog can be updated for all readers nearly instantly.
  2. You can interact with a blog. You can leave a comment. With the above you can’t interact at all.
  3. You can get some sense of the popularity of content in real time. How many comments does each post get? How many links does each post get? I can see in WordPress how much traffic each item gets. You can visit Digg to see voting on a blog’s items. Or, TechMeme to see which blog items got most links in the past few hours. None of the media above do you have a clue about the granular popularity of any of the items until much later after best seller lists are published.
  4. With the “new media” you can look archives and see all posts. Try doing that with a newspaper. Yeah, you can, if you pay the San Jose Mercury News a fee. But it’s not as easy as it is here.
  5. On a blog you can mix media. A post could contain text, audio, video, or photos. Not so on newspaper or magazines.
  6. On a blog you don’t need to convince a committee to publish. Not true with other media forms. Imagine you walked into CNN and said “hey, I have some cool video, can you publish it?”
  7. The new media is infinite. The media above all has limitations in terms of either length (a TV station only has 24 hours in a day — over on YouTube, I guarantee they publish a lot more than 24 hours of video in a day) or in quantity (try to convince USA Today to publish a 40,000 word article, or, 500 articles on the same topic).
  8. The new media is able to be syndicated and linkable and easily reused. you can link to your media here, for instance, a few seconds after you publish it. Try doing THAT with any of the above media. Not to mention, your words kick into an RSS feed which you can then republish using something like Google Reader, if you’d like, or you can copy a sentence out of a post, paste it into your own blog, and say something about what I just said.
  9. The new media can be mashed up with data from other services. Many people are putting widgets on their blogs that display various things from places they don’t control. That’s impossible in the older media above.

By “social media” or “new media” we’re talking about Internet media that has the ability to interact with it in some way.

Above material from What is social media?., Scobleizer 16 February 2007

Examples of social media software applications include:


  • Blogs: Blogger, LiveJournal, Open Diary, TypePad, WordPress, Vox, ExpressionEngine
  • Micro-blogging / Presence applications: Twitter, Plurk, Pownce, Jaiku
  • Social networking: Bebo, Facebook, LinkedIn, MySpace, Orkut, Skyrock, Hi5, Ning, Elgg
  • Social network aggregation: FriendFeed
  • Events: Upcoming, Eventful, Meetup.com


  • Wikis: Wikipedia, PBwiki, wetpaint
  • Social bookmarking (or Social tagging) (Golder & Huberman 2006): Delicious, StumbleUpon, Google Reader, CiteULike
  • Social news: Digg, Mixx, Reddit
  • Opinion sites: epinions, Yelp, City-data.com


  • Photo sharing: Flickr, Zooomr, Photobucket, SmugMug
  • Video sharing: YouTube, Vimeo, sevenload
  • Livecasting: Ustream.tv, Justin.tv, Stickam, bizbuzztour.com
  • Audio and Music Sharing: imeem, The Hype Machine, Last.fm, ccMixter

Reviews and Opinions

  • Product Reviews: epinions.com, MouthShut.com
  • Q&A: Yahoo! Answers, WikiAnswers
  • Employer Reviews, Jobeehive.com


  • Media & Entertainment Platforms: Cisco Eos
  • Virtual worlds: Second Life, The Sims Online, Forterra
  • Game sharing: Miniclip, Kongregate

Above material from Social Media, Wikipedia

What social media do you use?


No comments yet.

Add Yours

  • Author Avatar


Comment Arrow

About Author


Instructor for Interactive Design 01