….so, I will stretch those four corners of the envelope and unleash my creativity as I embark in my learning journey called – Visual Design and Display of Information!
Hello, and welcome to my first blog (and first time using WordPress), where I have the honor and pleasure to take you through my personal experiences, analysis, perceptions and learning about the Universal Principles of Design.
As I develop my blog through daily and weekly reflections, form and function will be kept top of mind; resisting the urge of creative impulses and acting solely on informed design decisions.
A few navigation tips:
- Top Menu Bar takes you through my completed assignments through out the course
- The images located directly below the Menu Bar are my “sticky posts” with “featured sticky images” (these are several highlights of the design principals I’ve learned)
- This first post is a sticky post with no “featured sticky image”, (Does not appear in the top bar, but appears as the first view-able post) because I wanted to give you a warm welcome and tell you what this site is about using an image that is related to the overall visual theme of this blog
- The side bar to the right displays several options for displaying certain types of information (i.e. by “Weekly Reflections”; posts that have been categorized by weekly topic, “Recent Posts”, and “Archives” as well as some other widgets I have been playing around with.
Phew, how was that for my first three seconds to capture your attention? Did I make a good first impression?
Well, if you’re still reading – we’ve got BLAST OFF into into my very own personal piece of cyber SPACE!! To infinity and beyond!!
Although the academic portion of my experience into VDDI has come to an end, the journey continues as impart my knowledge through the Visual design and Display of Information in my E-Lessons. I would like to take this opportunity to thank the instructor – Julian Hunt for creating a wonderful e-lesson for us and for sharing some of his experiential knowledge with us. Have a wonderful summer,
A property in which a form is made up of parts similar to the whole or to one another.
I’ve seen this one before; the image of the Mona Lisa recreated using a variety of specially selected images to match the correct color hues in the painting – incredible. There is another one our saw recently of Martin Luther King image recreated by rearranging colors of the Rubiks Cube. This recreation includes a process called recursion (naturally occurring self-similarity)
I would be great if I can find and opportunity to use this design principle when incorporating story telling in my E-Lessons!!
Had to read about this one, it implied shopping and window displays of clothing shops! I love to shop so my curiosity was peaked not to mention the interesting name, LOL.
Horror Vacui refers to the fear of emptiness (opposite of minimalist) and the value perception; that is as Horror Vacui increases Value decreases or increases. Depending on who is viewing this; the person who is accustomed to having more – Less is more, for the person who is accustomed to having less, more is more. This is why bulk shops try to fill stores and displays as much as possible and sell for less while boutique shops take a minimalist approach and sell for more.
In designing my e-lesson, I will apply the “Less is More” approach to reduce clutter, create clarity and better understanding of content through less images of higher quality.
This image appealed to me as most of my lessons involve people and interactions. I use many images of people interacting with one another as well as video’s using our team members. Image perception is important in the visual design of my E-Lessons especially as it related to certain topics. In this section I learned that the higher the Face-ism ratio (close to the face itself) more focus and attention is on the person’s intellectual and personality attributes, where as the lower the Face-ism ratio, more focus and attention is on the physical and sensual attributes of the individual.
To calculate the Face-ism ration:
- take the head height (top of head to bottom of chin) and divide by
- the total visible height (the top of head to lowest visible part of body)
- Image without face = 0 Fascism Ratio (lowest) Used for Ornamental interpretations/ association
- Image with only a face = 1 Face-ism Ration (highest) Used for thoughtful interpretations/ associations
The closer the score is to 1, the more likely the perception will be that the image represents a more dominant, intelligent and ambitious individual and vise versa.
This image was one of the very first images that jumped out at me when going through the VDDI book. It sends a powerful and emotional message about the severity and consequences of drunk driving. It depicts a young victim, who survived a horrible accident caused by impaired driving and now has to live with the consequence of an severely altered appearance for the rest of her life. This poster compares the before and after image associates the strong negative emotional reaction evoked by the injuries and the behavior that caused it.
Classical Conditioning is a technique used to associate reactions resulting from an unconscious physical or emotional response. This technique is commonly used in dog training. Having a dog myself, it’s very clear to me that my dog performs tricks knowing that a reward (a doggy treat) will be given in return. The sound of a key in the door, creates excitement knowing that his mommy and daddy have arrived home.
Classical conditioning will be used in my E-lesson design to evoke positive emotional feelings as being elicited by our guests as a result of our reactions or thoughtful behaviors.
The same way a human survives by fulfilling their most basic need to survive Food, Water, Shelter ect. through the “Physiological Needs”, a strong visual design must meet the most basic need of “Functionality” before it can even consider satisfying the higher level needs. Here’s the chronological breakdown of the VDDI Hierarchy of needs starting with the “low level” needs:
Functionality – Does it work?
Reliability – Does it work consistently and of acceptable quality?
Usability – Is it easy for all users (regardless of physical abilities/ accessibility including perceptibility, operability, simplicity and forgiveness W3C guidelines)?
Proficiency – Does it achieve the outcome of doing things better than they could previously?
Creativity – Does user interact with design in innovative ways?
I feel this comparison visually displays the correlation of human needs and visual design needs but in VDDI terms; as if it were translated into a different language.
Nature or Nurture? – The Biophilia Effect and Savanna Preference
It’s no wonder why these two principles of design are apparent in our existing era; although we have evolved as a species, our desire to be surrounded in environments that are rich in nature views and open spaces are deeply rooted in our brains since the beginning of time.
The Biophilia Effect is most effective when used to design in environments of learning, healing and concentration using imagery that resembles natural environments like greenery or outdoor nature views.
The Savanna Preference focuses on design that uses lots of lush open spaces like scattered tress, water, uniform grassiness as opposed to desserts, dense jungles or complex mountains with obstructed views. Going back to our ancestors and the need for survival, the preference was open spaces with more visibility and less obstruction especially when keeping an eye out for predators. One other distinct difference with the Savanna preference is that its strongest with children and then eventually grows weaker with age as influences change.
That sounds (aka tone) delicious (flavor) are all useful techniques in getting the message across and making information memorable.
TONE – is my content
FLAVOR – is my creative license
- Case Study
Adult learn by adopting the WIIFM (What’s in it for me?) approach! Remember that the website has a good balance of meaning, content and design.
Set a rhythm and be consistent when creating headings. It can be a question, sentence, phrase, call for action or imperative.
Linguistic patterns also add interest to content for example:
Play on words: using puns, similes and metaphors
Word Connotations (writing/ scribbling)
Word Associations (laugh/Joke)
Add meaning with descriptions/ adjectives. Use cliches i.e. “think outside the box”
When creating sites or learning activities, links should not be the source of the content. Allow the reader to get the gist of this information by the information chunk that was provided in the content. The misuse of links can be distracting as they are usually identified by a different color or underlined. Another pitfall to added too many links is that it can cause a tangent, spinning users out of control forgetting how they got there in the first place and what was their original intent! Links half way through can also break readers train of concentration.
OMIT – if you don’t need it
EDIT – if you can say it in fewer words
CUT- if it doesn’t fit
CIRCLE – group related items
NUMBER- hierarchy of information
STRIKE IT OUT – serparate important info
“Direct navigation traffic is by far the most highly targeted form of the web traffic available.”
– Marc Ostrofsky
Yes, today’s blog is about Storytelling
As an expansion to the sixth variable indicated in the Stickiness principle, the Storytelling principle is one that resonated strongly with me as I am part of an organization that promotes a strong storytelling culture. Working in the hospitality industry, you know that it is about making those emotional connections with our guests’, it’s about being less transactional more interactional. We are a team that celebrates successes and share stories about how we create positive memories for our guests and when we do this, we motivate and inspire each other to empower ourselves to initiate hospitality and put our own spin on creating memorable experiences for our guests. Part of my goal this year is putting together e-lessons for a broad range of colleagues from Front Desk to Housekeeping to Kitchen – it is my mission to ensure I deliver elements of storytelling in E-lessons with the intent of sparking an emotional response in a colleague to live and breathe our strong experience culture. I intend to incorporate understanding through Audio (oral) Visual (video) Text (on screen info) and Digital (by incorporating elements of FLASH design wherever appropriate and current/ relevant forms of social media or youtube clips. Here’s my interpretation of the six fundamental elements to effective storytelling:
- Setting – Time and Place through video clips
- Characters – Will be our own colleagues acting out scenes
- Plot – Company Standards linking back to our Vision, Mission and Core Values
- Invisibility – MY FAVORITE!! I want learners to be so engrossed in the e-lesson that they forget the medium (the computer) which for some learners may be a challenge or have initial fear/ anxiety/ reluctance.
- Mood – Will use background music on title screen and create an overall mood of being Welcoming, Engaging and Empowered through interactive games, quizzes and videos.
- Movement – Will have a consistent flow designed for learners to go at their own pace and not exceed and average completion time of 25 minutes.
In one of my earlier blogs, I mentioned that it’s content is included based on “Need to have” not “Nice to Have” Once the content has been filtered in this fashion, the task of “Chunking” begins. The term chunking describes the process of organizing and displaying information in a way that gives pattern and. Here are some simple steps to get started: Step 1 Categorize Information into meaningful “Chucks” Step 2 Assign Priority “Hierarchy” Step 3 Create Relationship Step 4 Analyse Function.
Here are a few examples of information can be “Chunked”
Ahh, seven sexamples: Coincidence? Let’s not forget, “The magical number seven, plus or minus two” where the number of objects a human can hold in working memory is seven with two to three bits of information. This is important when deciding how the information will be organized.
Similarity, Advance Organizer and Color
Incorporating similarity in design is a visual way of chunking like elements that are related. Increased Similarity results in simplicity and reinforces relatedness of design elements. In order of least effective to most effective the following groupings can be used to facilitate similarity:
- Shapes – Weak
- Size – Better
- Color – Best (less is more, do not exceed 5 colors at a time)
Although it’s a more visual representation, Similarity is much like to an instructional technique that helps people understand information in terms that they already know called Advance Organizer. It usually begins with an introduction and takes a linear approach to learning that can be presented in two different ways:
1) Expository (little to no knowledge on information)
2) Comparative (knowledge exists and leverages familiarity)
We can link this principle back to the design of the Hierarchy of Needs Model, as this principle is designed using the hierarchy approach.
Usability= Ease of Use
Here’s how I applied the five quality components of usability to my Blog, once again, taking into account my audience:
- Learn ability – knowing that my instructor is a fan of Apple products, I had selected a design that uses the general look and feel of an apple web page therefore making first time navigation a breeze.
- Efficiency – with familiarity come speed and accuracy which translates to efficiency. The design of my blog achieves this rather quickly as it is a user friendly and quickly recognizable template.
- Memorability – very high chance as many users have apple products or navigated through similar websites, allowing blog viewer to return with ease. Like riding a bicycle!
- Error – Low probability of errors as this blog takes a very linear approach, a fixed side bar and the option to “go back” at any time.
- Satisfaction – Visually appealing with good quality graphics, catchy titles using metaphors, inspirational quotes and great use of color and color contrast.
Accessibility = Usable without modification, by as many people as possible
Accessibility benefits everyone! This is why the design approach I took on my blog is to consider all users regardless of their physical or technical abilities. There are four characteristics to accessible websites, allow me to explain how these were applied to my design blog, not only when access on computers but on mobility devices as well:
- Perceptibility – I’ve incorporated the use of redundant coding methods such as ALT Text and ALT Tags for Images. Position of controls and information can be perceived by users who are sitting or standing.
- Operability – Applied good affordances (ability to undo or go back). Position of controls and information can be perceived by users who are sitting or standing.
- Simplicity – KISS (Keep it Simple Smarty) Both in design and language. Blog takes a conversational approaching at a level accommodate a large audience.
- Forgiveness – Very user friendly, always option to go back and a fixed sidebar to assist with navigation & consistency.
As I continue developing the design blog, I will cross reference with the Web Accessibility Guidelines – W3C website and complete the Disability Accommodation checklist to keep the site accessibly.
“I think design coves so much more than the aesthetic.
Design is usability.
It is information architecture.
Is is Accessibility.
This is all design.”
– Mark Boulton
What is Visual Design and Display of information? To me – EVERYTHING!! Being a visual learner myself, the images, layout, typography, color and style is critical in the overall effectiveness of getting the message across.
I like to see what others think! Engage my senses; bring words, images and shapes together to enhance communication. The more multi- sensory the learning experience (Especially visually for me), the more memorable it becomes!
It starts with a vision and a solid plan. Vision is the overall goals and objectives set out by designer whether its educational or commercial. It’s the overall message that will be conveyed. Have solid content and filtered information eliminating the “nice to knows” and including only the “need to knows”. Planning involves identifying the Purpose – what type of site is it? (Educational, Business, Institutional, Personal ect) Identifying your audience and designing keeping in mind the lowest common denominator As Aristotle said “The audience is everything”. Context – what is the big picture; seeing the forest through the trees. Considering things like brand imaging to ensure cohesive identity with to company look and feel when designing. Statement of Purpose is then created by combining all the above to ensure a clear and concise explanation out outcome.
Great companies have a solid Vision and Mission (ie plan) Great websites are no different so lets get started!!