Usability and Visual Design: 3 Tools that Have it All


(Check the actual thing out at http://www.wix.com/techpudding/techpudding)

Greetings! Today I’d like to showcase two free web 2.0 tools that are both easy to use and look incredibly professional. They are both great tools to create widgets for websites, wikis, or blogs. Unlike many free web 2.0 tools available, their designers thought hard about creating clean and simple user interfaces, easy-to-follow instructions, and they also understand the concepts of visual composition and multimedia design.

When compared to tools like Prezi (a flowing online presentation maker) or Capzles (a visual timeline maker), where the user interface is relatively intuitive but the finished product is not quite fully professional unless you take extra time and effort, the following tools have an easy-to-use interface and highly professional outcomes that do not require extra effort by the user.

Because they are so professional looking, I would not only use these tools for their intended purposes, but also examine the elements of effective visual, usability, and multimedia design with students. We know how important usability and design are with the many advanced tools and technologies available to everyone. Trying multiple tools and comparing their usability is also a rich learning experience for students to understand what it takes to create useful and effective web tools. The only issue I have with these tools is the inability to embed them into WordPress.com, but they can all be embedded in other blog services and social networking sites.

1. Wix http://www.wix.com/

Wix not only allows you to create flash-based websites, but widgets as well. The owl on the scrunched-up paper at the top of this post was created using the incredibly easy to use widget maker feature. The owl actually blinks! You can add from Wix’s extensive library of music, animated images, and videos, or incorporate your own into the design. I used a ready-made template and simply changed the image to the owl and played with the font and text a bit. I even embedded a link in the text for my own blog. The entire process took me no longer than 5 minutes.

2. Popplet http://popplet.com/

With a name like this, you’d never know what this site can do. What it does very well, is help you to create mind maps that are incredibly stylish and easy to use. My example above is simple, but you can see how the visual design comes together to create something that is visually effective. You can use Popplet to create attractive posters and presentations as well. Check the site out to see some excellent examples!

3. SpicyNodes http://www.spicynodes.org/index.html

With a name like this, I’m sure you are interested. This site helps you to create flowing, interactive mind maps that have animated, interactive features like my trial above. They are incredibly professional looking and easy to use. With a number of styles to choose from and the ability to play with the font and add images, this is a slick way to create organized visuals of information and ideas.

If you have suggestions for other tools with superior ease of use and extremely professional design, please share them! And if you have successful stories of how you have used such tools, share them too!

Time to Timeline: A Review of 5 Free Tools

Thanks to the amazing Ed Tech Leader Gina Stefanini’s presentation at the Assistive Technology Industry Association (ATIA) Conference in January 2011, I learned about five tools that can help students and teachers create visual, interactive timelines. I finally had the chance to sit down and experiment with them! There are infinite ways in which you can use interactive timeline tools in your classroom, including the following:

  • Chart whole-class understandings of an overarching theme over a period of time
  • Learn about the order of actions or happennings
  • Put items in order according to a story
  • Plan actions before or as you carry them out
  • Map the history of a person, place, or event
  • Record individual student growth and learning over time
  • Conduct research and record your findings
  • Have others comment and give feedback on your work
  • Showcase on-going work using many mediums including music, video, images, text, voice recording, and more

For a brief introduction to using timelines in the classroom, check out this article in Edutopia, titled, Timelines 2.0: A Fun, Easy, and Free Classroom Tool by Chris O’Neal.

The following are notes that I hope will help you decide which timeline tool is best for your needs.

Capzles http://www.capzles.com/#

  • Requires sign-up
  • Excellent example: A Brief History of Apple
  • Sharing: embed in websites (though I was unsuccessful at embedding A Brief History of Apple into this post), link, share on social networks, email, RSS
  • Interface: slickest and coolest looking of the tools on this list, easy to use, drag-and-drop to re-order, auto-saves as you work
  • Customization: neat backgrounds, fonts, colours
  • Privacy: full range of options from completely private to allowing others to edit your work
  • Content: photos, videos, audio, text uploaded from your computer
  • Community: add and message friends, bookmark favourites
  • Other views: none so it would not print well
  • Cons: can’t add captions to photos unless you add a caption as the name of the photo before you upload it

TimeToast http://www.timetoast.com/

  • Requires sign-up
  • Excellent example: The Life of Galileo
  • Sharing: embed in websites, link, share on social networks, RSS
  • Interface: very simple and clean, easy to use
  • Customization: none
  • Privacy: full range of options
  • Content: photos uploaded from your computer and text that you type
  • Community: none
  • Other views: text view available (good for printing)
  • Cons: must upload photos one at a time, no customization options

OurStory http://ourstory.com/home.html

  • Requires sign-up
  • Excellent example: it was very hard to find one due to a lack of organization and navigation options on the site
  • Sharing: embed in websites
  • Interface: cluttered and confusing
  • Customization: saw some that were different colours but couldn’t figure out how to do it for my test timeline
  • Privacy: full range of options
  • Content: photos that you can search for via Yahoo images, images uploaded from your computer, and text that you type
  • Community: meant for people to create timelines of their lives and share with their families and communities, can also join groups
  • Other views: none
  • Cons: incredibly confusing and hard to use!

Dipity http://www.dipity.com/

  • Requires sign-up
  • Excellent example: The History of Legos
  • Sharing: embed in websites, link, share on social networks
  • Interface: not quite as slick looking as Capzles, but still pretty neat, easy to use, first part of the creation process is mostly text-based
  • Customization: a few backgrounds to choose from
  • Privacy: full range of options
  • Content: photos, videos, audio, text uploaded from your computer, 20 most relevant images from online searches, a pre-set number of your most recent uploads to Flickr, YouTube, and other networks, blog posts and tweets
  • Community: add friends, follow favourites
  • Other views: default timeline, list, flip book, and map
  • Cons: sometimes frustrating when clicking on individual timeline items because it moves whenever you move your mouse and movement is not quite smooth

XTimeline http://www.xtimeline.com

  • Requires sign-up
  • Excellent example: History of Mobile Phones
  • Sharing: embed in websites, link, share on social networks, but there is an extra step to sign up for this
  • Interface: 90% text-based, not very intuitive
  • Customization: none
  • Privacy: full range of options
  • Content: photos uploaded from your computer
  • Community: add favourites
  • Other views: none
  • Cons: text-based, boring looking, not very intuitive

The Verdict

  • Best tool overall: Capzles
  • Accommodates the widest range of media: Dipity
  • Most ways to share: Capzles
  • Easiest to use: Capzles and TimeToast
  • Most customization: Capzles
  • Coolest looking: Capzles
  • Best for sharing blog or tweet updates: Dipity – if you create one with your tweets/blog, it will keep it updated with your latest posts
  • Best for printing in b/w: TimeToast

Have you used interactive timelines for teaching and learning? How have you used them? Can you share some tips for making the most of them? Which interactive timeline tools do you use and why?

(Image: Nu Food Timeline #2, by Bennet for Senate. 2009. Available under a Creative Commons License.)