Tips for Apps and the Web: Designing for Teens, Part I

Jakob Nielsen, of the Nielsen Norman Group, recently wrote an interesting post about designing website for teens. He provides good information for anyone considering this age group.  The study includes tips for designing for smaller screens such as laptops with track pads, touch-screen tablets, and smart phones.

Teenage Usability:  Designing Teen-Targeted Websites

Jakob Nielsen, Alertbox, 2/4/13

The research shared in Nielsen's post is important. The results of research conducted 8 years ago are compared with current findings.  Nielsen discusses some of the myths about teens and technology. As Nielsen points out, teens might appear to be tech-savvy in some ways, but they possess brains that are in the midst of cognitive development,  just one factor to consider when designing web experiences for this age group.

Nielsen Norman Group's related product, "Teenagers (Ages 13-17) on the Web" provides additional information on this topic. It includes 110 design guidelines informed by research conducted with teens.  Busy web developers might find the fee of $149.00 for this report appropriate.   

The information in this report would also be useful to design/development teams who aim to provide web-based educational content for this age group.

Pew Internet & American Life

Another good resource for designers/developers targeting applications or websites for teens is the Pew Research Center website.  The Pew Internet & American Life Project continues to investigate a wide range of topics related to the use of technology among people of all walks of life.  What I like about the Pew Research Center is that their reports are free, and include summaries as well as samples of interview questions.

Researchers from the Pew Internet and American Life Project share their knowledge in a variety of forms.  Data is available for download in SPSS and comma-delimited format, crosstab files and questionnaires.

The website also provides access to number of presentations, such as the one below:

Teens 2012: Truth, Trends, and Myths About Teen Online Behavior from Pew Research Center's Internet & American Life Project

RELATED/SOMEWHAT RELATED

Nielson-Norman Group Research Reports

Children 3-12 on the Web

Teenagers (Ages 13-17) on the Web

College Students (Ages 18-24) on the Web

Pew Research Center Resources
Featured Research: Teens
Pew Research Center Trend Data (Teens)
In-store Mobile Commerce During the 2012 Holiday Shopping Season

Teens and Education Resources 
The following websites also provide resources for other age groups and related topics.
Edudemic
Edudemic Ed-Tech Tools 
Edutopia
Edutopia: 6-8 Grade Level Resources
Edutopia: 9-12 Grade Level Resources
Mind/Shift

Part II will focus on teens and considerations for educational technology.

Creating Responsive HTML5 Touch Interfaces (Stephen Woods -Video and Slides)

Here is an interesting video I came across during my HTML5 explorations - Stephen Woods, from Flickr, shares his words of wisdom about HTML5 and touch interfaces:


Stephen Woods (Flickr): Creating Responsive HTML5 Touch Interfaces




Here are a few links from the presentation:


Slides:  Creating Responsive HTML5 Touch Interfaces
http://www.slideshare.net/ysaw/creating-responsive-html5-touch-interfaces

Responsive Web Design 
http://www.alistapart.com/articles/responsive-web-design/

Usability of Touchable-Moveable Multimedia Content. Part I (carousels and more)

I've been revisiting the topic of interaction design/usability for "touchable/moveable" multimedia content for the past couple of weeks.    I recently got an iPad2, so I'm in the "app" exploration phase -  a new world, since I never had an iPhone, iPod touch, or iPad "1".  


I plan to share  experiences, thoughts, opinions, and suggestions related to this topic during the upcoming months.   I welcome input from IMT readers!


Getting back to my iPad2....In addition to using the device to run apps, like most people, I also use it to visit websites.  Many sites now appear to be optimized for mobile devices, which is great for my Android-based smartphone, but for my iPad, not so much.   I thought by now we'd have more touchy-feely content to play with.


I've noticed that  basic features that work OK with touch interaction, such as the carousel, 
seem to miss the target, as discussed in the following article:



5 Big Usability Designers Make on Carousels
Anthony, UX Movement, 8/2/11


Although the above article was written from a "click" rather than "touch" perspective, many of the comments Anthony brings up ring true for websites and apps that are accessed through tablets and other touch enable screens.



I'm disappointed.  Here are a few of my grumbles:

• Many designers/developers have been slow to look at the increasing number of people who are accessing websites and applications via touch-enabled screens - of any size.   
• Many designers/developers have been slow to catch on that a website or app might be viewed/used by more than one person at a time.  Websites for house-hunting, home furnishings, vacation/travel, and education are a few examples that come to mind.
• Too many "multimedia" apps/websites are flat. Many still have a power-pointy feel.
• Websites optimized for mobile devices often leave important features out.
• Designers/developers sometimes don't seem to think about the various scenarios in which their applications/websites might be used - while balancing a baby on one hip, preparing a meal,  working out,  walking the dog, trotting around the mall with a friends/kids/spouse,  eating, waiting at a stop light, etc.

Too many iPad apps are flat and power-pointy. Too many apps don't take full advantage multi-touch features.  Very few apps allow for efficient interaction between two people on the screen.  




SOMEWHAT RELATED
Carousel Design Patterns   I will add more related links in the future - not limited to carousels : )
Carousel Interaction #21 (Mike Highfield's Rapid eLearning Blog
Carousel (Interaction Patterns Wiki)
Carousel (Welie)
Mobile Implementation of a Web 3D Carousel with Touch Input
Bjorkskog, C., Jacucci, G., Lorentin, B., Gamberinit, L.



Photo Credit:  Ohad

Best Practices For Designing Websites for Kids - Quick Link

Best Practices For Designing Websites for Kids
David Morrison, Smashing Magazine, 7/6/11


Here is a short quote from the article:


"According to Jacob Nielsen’s research on teenagers, interactive website features (such as forums, mini-games, polls, ranking systems, competitions and 3-D interfaces) are valued by kids if they build a sense of community and foster participation. Bolting such features on will not likely prove effective, because kids will soon see the gaps and re-evaluate the website, despite any initial interest."

There is a need for multi-touch/gesture designers/developers!

If you are a talented interactive web designer/developer, game designer/developer, traditional programmer with a creative bent, or someone who who is thinking about working with technology in the future as a programmer or designer,  I urge you to consider thinking about designing/developing multi-touch applications in the near future.

In my opinion, there will be a need for multi-touch web applications as well as for multi-touch education and collaboration applications for the SMART Table, Microsoft's Surface,  multi-touch tablets like the rumored iTablet from Apple, and the multi-touch laptops and all-in-ones (Dell, HP, etc.).

Below are direct links to some of my blog posts related to multi-touch applications and screens. If you are fairly new to multi-touch, I'm sure that looking through some of my blog posts will be helpful.  All of the posts have links to resources, and most have photos and video clips of multi-touch in action.

If you are new to this blog, I have a great deal of information, links, photos, and video clips of various multi-touch screens and applications. The best way to find the stuff is to enter in a keyword in the search box for this blog:  multitouch, touch screen, gesture, multi-touch, etc. on  this blog.

Also do a search on my other blog: The World Is My Interface http://tshwi.blogspot.com

Here are some links:
Do you have an HP TouchSmart, Dell Studio One or NextWindow touch-screen? NUITech's Snowflake Suite upgrade provides a multi-touch plug-in
http://bit.ly/5tdlhc

The following blog post has a video clip that shows someone from Adobe painting with a multi-touch application in development:
More Multi-Touch!: Rumor of the mobile apple iTablet; AdobeXD & Multitouch; 10-finger Mobile Multitouch: http://bit.ly/4S9Upm

Ideum's GestureWorks: http://bit.ly/4C1p7M

Interactive Walls, Interactive Projection Systems, GestureTek's Motion-Based Games: http://bit.ly/6GRGtW

Intuilab's Interfaces: Multi-touch applications/solutions for presentations, collaboration, GIS, and commerce: http://bit.ly/7RK7qN

For software developers:
How to do Multitouch with WPF 4 in Visual Studio 2010: http://bit.ly/7c4YqC