Badges/Designstorm

This is a discussion page for the community to brainstorm UI and UX ideas around badges. Feel free to make your own sections and add to the discussion any way you'd like.

But, if you want to simply comment on a section, be sure to indent your section (in wiki markup you would use two or more colons) as well as to sign your name (if you are logged into the wiki, you can use the wiki markup of four ~-characters in a row). --Joshuagay 09:05, 11 November 2010 (PST)

This is an example of commenting on a comment ;-) --Joshuagay 09:05, 11 November 2010 (PST)

If you need any help editing this page, uploading/embedding graphics, or you want to find a way to share richer examples (e.g., with javascript or canvas/svg elements) please feel free to contact joshuagay@gmail.com.

Rangoli - dynamic badge idea

Rangoli is a traditional decorative folk art of India. They are decorative designs on floors of living rooms and courtyards during Hindu festivals.

On aspect of many Rangoli is that they are created using some mathematical pattern that is repeated over and over (sometimes fractal like, sometimes simply redrawing based on symmetric moves). Often Rangoli start out as simple while lines and then color is added in to add complexity, such as in the example below.

The idea of "Rangoli" badges is that a users badge could be updated over time. So for example, if a person begins down a path of learning a particular topic he or she may be given a rangoli-style badge. As this person continues to explore the topic their rangoli will be updated with added color and complexity.

One inspiration for rangoli badges is the idea that you would be giving recognition and acknowledgement for an individuals persistence of staying with a particular path of learning rather than trying to assess whether or not they have gained new skills or competencies within a given domain or topic.

Various Ways of Generating Geometrical Patterns

Rangoli is just one of the interesting geometrical patterns that we can consider. The idea can be extended to any of the programmable patterns that provide us with possibilities of starting with something simple and keep on extending the pattern by modifying some of the parameters. Some of the ideas are given below.

One idea is to begin with something simple, say a circle, a line, or a triangle. This can be the invitation badge the learners get as soon as they join. As they continue to demonstrate their newly learned skills, the badge transforms from simple to complex. For example, a line can begin to evolve into any of the fractal structures. Since different learners learn differently, choosing a non-linear forms for badges can be a better idea. The number of iterations of the generating program can provide an index of achievement.

An illustration of the above idea can be seen from this spirograph generating model. As this example shows how several starting points can be used for different courses an organisation offers, and generate more complex patterns. We generated such patterns using Inkscape in SVG, as well as using geogebra demonstrating that they can be generated by simple programs. By using different parameters, such as number of constructions made, number of activities participated, number of presentations, etc. the system can generate patterns and present them as badges to the learner, which eventually get stuck on the badgepack, if not a backpack.

Road Maps as Badges

Most courses begin somewhere and may have multiple end points. This path can be drawn as a tree if the starting point is singular, but we may get a sort of a network if the starting point and the end points are multiple. In an online learning environment it is likely that we get a network unlike regular linear courses in a book. This network can be drawn as a graph as shown in the example of a dependency map. Each node in the graph is hyperlinked to the respective milestone in a knowledge network. Considering each of the nodes in the graph as the multiple learning objectives of a course, we can obtain a "cartograph" by merging all the dependent nodes from the various online resources. This graph may have multiple uses:

• provides the road map for learning,
• can be used to track the progress of each learner,
• can provide the roads ahead having reached somewhere, and
• can be used as a actual grade card showing each completed node in a color, say green.
• can be used as dynamic badges for self-assessment as well as peers.

More details on developing a cartography of knowledge are discussed in [1],[2].

Nature Inspired Organic Badges

Several natural objects give us multitude of options to design badges. For example, considering each petal of a flower as an indicator of an achievement, we can develop a program that produces e.g. a sun flower. By altering the shape, color, length of the petals and the pattern of arrangement on the base, a variety of flower patterns can be generated.

• the number of leaves in a branch
• the number of leaflets in a compound leaf
• the number of petals in a flower
• the number of eyes on the surface of a fruit
• the number and color of feathers on a cap

Ribbon bars

On the Web it is common practice to have thumbnail sized images be the smaller more compact version of a full sized image. When creating badges online this very well may be a simple and good approach to take. In the military world, the way the problem of being able to display medals in a more compact way on uniforms was the invention of ribbon bars. From Wikipedia, Ribbon bars are small decorations that are worn by military, police, and fire service personnel or by civilians. Ribbon bars are mainly used when wearing either full decoration, or when wearing medals is considered inappropriate or impractical. Each military force has its own rules on what ribbons are worn in which order of precedence. Some awards are "ribbon only", having no associated medal.

A modern, digital example of ribbon bar that I like is from the Wikimedia community. For a long time now, Wikipedians have awarded each other "barnstars", which users can award each other to recognize various achievements of sorts. When some users started to get a lot of barnstars, they came up with the idea of creating ribbon bars to go along with barnstars so they could be displayed in a more compact fashion.

External Links

• Wikipedia Ribbon Bars, [Extrnal Links http://en.wikipedia.org/wiki/Wikipedia:RIB http://en.wikipedia.org/wiki/Wikipedia:RIB]