Spark

Subscribe via Email

Subscribe to RSS feed

Archives

Follow Us on Twitter

Archive for the ‘Design’ Category

What happens when you push the broccoli button?

As I was getting ready for work the other day, my 3 year old son decided he wanted to help me iron my shirt. First he wanted to touch the iron, but clearly that was not an option, so instead he settled on pushing the spray button and soaking my entire shirt in the process. Well that was exciting enough for him, until he noticed another big button on the iron. That’s when he asked “What happens when you push the broccoli button.”

IMG_4891

No, I do not have a Veg-O-Matic 2000 that shoots out fresh steamed broccoli with the push of a button. It’s simply that from my son’s perspective, the symbol for steam looks a lot like broccoli. Now don’t be fooled, the kid never actually eats broccoli. Actually I’m surprised that he didn’t think it was cotton candy. But regardless, it demonstrates that iconography really is up to the interpretation of the user.

So how do you ensure that the icons you create will be clearly understood by your intended audience? It’s not always an easy process, especially when you’re dealing with abstract concepts, but the key is to closely define the relationship between the signifiers and the concepts they represent. There are two primary types of signifiers, iconic and symbolic. Iconic signifiers are visually representative of an object or a function. For example, a clock represents time or a calculator represents a mathematical function. Symbolic signifiers on the other hand, represent a concept in a more abstract way, such as downward arrow representing a download function.

Typically iconic signifiers perform better on speed of recognition and overall comprehension as users tend to interpret an unknown icon as having the functionality they think it resembles. However for that to be successful, the visual identifiers must be strong enough that the icon is not confused with another object, such as broccoli. In order to design effective iconography, you must understand your audience. Age, gender, culture and language are all key factors that influence comprehension.

For some concepts you may need to utilize a combination of iconic and symbolic signifiers. A good example of this is the “revisions” Revisions icon in WordPress. It consists of a clock, an iconic signifier which represents time and a backwards arrow, a symbolic signifier which represents stepping back in a process. This combination does a good job of communicating an abstract concept and providing clues about the underlying function of the icon.

When creating icons, it’s also important to think about the overall design system. Each icon should be clearly distinguishable from the others, while still working together as a whole. Keep in mind simplicity and recognition and always make sure you validate the concepts with your target audience. They are the ones that will tell you if the icon is successful or not.

Interesting Insights from HOW Design Conference 2015

Chicago

The HOW Design Conference in Chicago this year really had me thinking about how I approach my daily work and even some aspects of my personal life. The talks were overall very informative, and also quite inspiring! Our group had a great time in Chicago. During our free time, we walked around town and took in a few sights and the beautiful architecture.

Here are five design focused ideas that I’m going to try over the next few weeks and beyond:

  1. Focus on Innovation. During the 1950s, 60s and 70s, the focus for designers was to make something look good. In the 80s, 90s and 00s, the focus shifted to the person, and it became all about the customer. Designers started to understand people and do research; it was a different approach. Now we need to put an emphasis on knowledge. We need people who know things; the knowledge we have as designers is more valuable than ever before. We need to keep learning, and sharing our knowledge with each other.
    IMG_6228

    “Innovation is found in the extremes. Defy designing for the average. Averages are useless.” – Dan Formosa

  2. Apply design thinking to solve social issues. What can you do as a designer to help others who are less fortunate or in need? One way is to design something that improves or helps someone else. People in impoverished areas in Brazil can now access TVs because flat screens are becoming less expensive and more accessible. They are able to discover things about the world, which may have never been possible before. They see how others live and work, and its inspiring them to want to do the same as well as learning about other cultures!

    How to save the world with design: “Do a little something here or there that helps improve someone’s life.” – Michael Bierut

  3. Always be making things and follow that instinct to move forward. Connect with people, even just one person, to collaborate with on your ideas. Carve out time for side projects on the weekends and free time to allow your creativity to run wild. Be yourself, be who you are in your personal AND professional life.
    20490_822261334520790_3358364726651017271_n

    “Say yes to the ideas in your head, free fall in to the unknown and create your own parachute.” – Ted Vadakan & Angie Myung

  4. Think huge but work small. Envision the bigger picture, but take smaller steps to achieve it. These smaller steps will be easier to tackle than getting bogged down with all the overarching details. Aim to be 10 times higher, and work to improve your process everyday and you will grow!

    “Exceeding expectations is a minimum requirement.” – Dan Formosa, Ph.D.

  5. Put people first. Cultivate relationships and build confidence in others. Leadership is a journey that requires a friend. If you’re struggling, help someone else. Give attention and care to others.

    “Leadership is like exercise… Do it everyday, the results take time but you will see them. It’s the little things.” – Simon Sinek

I enjoyed hearing all the different talks about design and the some of the keynote speakers were also very compelling! A few of my favorite keynote speakers were Simon Sinek, Dr. Brené Brown, and Michael Bierut. Simon Sinek focuses on harnessing leadership in others. He has a great TED Talk out on the web called How Great Leaders Inspire Action. Dr. Brené Brown aims to help others look internally to find their creative spirit and learn about themselves. She concentrates on humanity, communication and culture. Her TED Talk is called The Power of Vulnerability. Michael Bierut is a partner with Pentagram and has worked on some great design projects. He runs a podcast called The Design Observer.

If you ever get the chance to go to HOW Design Conference for design inspiration and growth, I recommend it! Have you been to any great conferences or training workshops lately?

CSS Frameworks – Does Your Client Need One?

shutterstock_244578541Many a times, when I start a new project, often the client gets excited when the word ‘bootstrap’ or ‘foundation’ comes around during the inception phase. They want to know more and get excited. They hope that their site would look great if is it built with a framework and typically look towards the UX developers/designers for advice and recommendations.

Listed below are the benefits of a CSS framework, which can help to educate the client on why they need it:

Responsiveness

The biggest advantage of a CSS framework is the grid system it comes with, which provides adequate breakpoints for different devices (phone, tablet, desktop, large screen), making your site truly responsive for different device widths. If the client persists their site need not be responsive, it is easy to disable the responsive feature for now and make use of the other benefits it provides. This way, if the site wants to be responsive few years down the lane, the foundation is already there in the form of a framework and should not be a hard task to make it responsive again.  

Uniform Styling & Branding

A CSS framework typically provides a uniform structure and styling for all the different html components such as buttons, navigation, panels, lists, etc. This is extremely useful and makes it easy for the design team to look up to and create the branding/styling of the site’s elements based on the framework’s styling. If there is no visual designer in the project, then the framework is already providing a base level of branding for the new site to be built.

JavaScript Components

Every website today makes use of several JavaScript components such as modal dialogs, panels, accordions, tooltips, carousel, etc. Traditionally, without a framework, one would need to write or import a custom JavaScript/jQuery plugin for each of these components. The downside of this method is that, some of the plugins can become obsolete and with no proper documentation or support, it is hard to debug and customize. Today, most of the popular CSS frameworks (bootstrap, foundation, skeleton, etc.) come packaged with these JavaScript components and makes it easy to implement, debug and customize.  

Accessibility

Accessibility is increasingly becoming an important feature of a website. The emphasis is on front end developers to at least provide a base level of support, and one could refer to section 508 checklist for that. Popular CSS frameworks like bootstrap and foundation do already include adequate support for accessibility in their html elements (form elements, modal dialogs, tooltips, panels, images, etc) which a front end developer can use and leverage upon to make the site more user-friendly.

A CSS framework also provides many other advantages such as native support for pre-processors (sass, less), customization for different needs, extensibility, ease of showing/hiding content on different devices, to name a few.

Here is a list of the most popular CSS frameworks currently being used in the industry – 

It is also extremely important to select the right CSS framework for the application you are building. Because, once you select a framework, it is a big overhaul to migrate to another framework and not advisable. Some of the deciding factors in selecting a proper framework would be –

  1. Browser compatibility
  2. Learning curve
  3. Ease of customization
  4. Ease of integration with the backend application
  5. Ease of migration to newer versions
  6. Usage, development community and support 
  7. Number of open issues with the framework 

What is your preferred CSS framework of your choice ? What factors do you consider before choosing one and how do you advice the clients on selecting the right one ? Let us know below.

Lessons Learned from an Accessibility Summit

AccessU Summit

Last week I participated in AccessU Summit, a daylong online conference sponsored by Knowbility and Environments for Humans. I have ‘sketched out’ some of the key ideas I took from each session, and I’ve grouped them into sections to steer you in the direction of the material that interests you the most. In addition to these, there are 3 more sessions that I will post next week. Also, I will share recordings from the sessions when they are available. My raw notes are on the Research SharePoint site.

“Developer” Sessions…

Web Accessibility Essentials Using WAI-ARIA and HTML5

Eric Eggert, Member of W3C’s Web Accessibility Initiative / slides: http://is.gd/4n299k

Eric previewed many codes samples (see slides) and then showed code working in Chrome.  As he ran this demo, Eric pointed out that people using assistive readers are used to hearing prompts such as “new menu item 1 of 3.” Eric showed several W3C tutorials, and highlighted the “why it’s important” justifications. Eric stated the obvious, it’s more effort to design to these standards, and yet it’s a standard to design to. Also, Eric uses Chromebox, as a screen-reader testing environment He said, “It’s not perfect but mostly works okay.”

Getting Ahead of the Curve: Scalable, Accessible, Enterprise-class Video on the Web  

John Foliot, Co-chair of W3C Accessibility of HTML5 Media Elements / slides: http://is.gd/ZAbcn1

I took from John’s talk that the future of video will be more extended dialogues (i.e., windows) with extended descriptions that a user can access by pausing and viewing the details. Also, he said that “clean audio” is coming, an option users can take to mute unnecessary background sounds. John provided some great resources for how to handle captioning. More vendors are offering this service so it’s driving down costs. There is video captioning software (DIY approach), and John recommended going with a service because using software is more laborious than a service, but less expensive. Video description software is out there and John recommended it to save time. Read the rest of this post »

Designing for accessibility does no one any favors

Book

For some time now I have contemplated, as a design practitioner, is my perception of design for users inclusive, empathic and universal? This has been nagging at me for some time. Actually it’s been calling my name, Psst. Lisa, you’re behind the curve in your understanding of designing the user experience for people that are, well, disabled.” Let me be more candid; my own perception of disabled people hasn’t been accurate, empathic or inclusive of the various impaired users attempting to access and benefit from the online world. My thinking on this topic needed a significant update, a DIY project in the making.

To start, I didn’t have an accurate definition of disabled people, nor of impairment. To my credit I had read the important book Design meets disability about two years ago. The author, Graham Pullin, raised my awareness of several issues and possibilities when designing for disabled people. For one, he helped me understand that disabled people is an appropriate expression “in the context of an environment or society that takes little or no account of impairment.” This is a troubling thought – “people disabled by the society they live in” due to the “designed” barriers and restrictions that limit participation in hmmm…life.  Read the rest of this post »

Less PowerPoints, More Prototypes

At the 2015 Adobe Summit, Todd Copeland of the National Australia Bank described how his organization is able to deliver digital experiences with the speed and velocity that customers expect. As Todd stated, “it’s a pretty simple equation: Less PowerPoints and More Prototypes. Less detailed specifications to justify business cases and more iterative customer testing.”

That “simple equation” is one of the key principles that is driving digital transformation. In today’s world, organizational velocity wins. Companies that are quick to adapt and respond to customers have a clear advantage. Those that are slow to respond are subject to digital disruption (see Blockbuster). In order to effectively compete, organizations must find ways to provide better customer experiences more efficiently. Enter Lean UX.

Lean UX abandons the idea of deliverables as milestones in favor of a progressive working model developed across multiple sprints. This is an important concept when you think about organizational velocity. Because deliverables eat up time. There is time required to create the deliverable, time to develop a presentation around the deliverable, time to present the deliverable and time to review and revise the deliverable. That is time that could be spent developing the actual solution. Lean UX enables the designers and developers to work collaboratively to establish a shared understanding without the need for detailed specifications or other paper-based deliverables. It also promotes transparency and trust, which can lead to a better solution.Lean UX Model
The Lean UX process involves 3 core steps:

  • Think: In the think stage, designers, developers and business owners collaborate on a particular problem and sketch out ideas for the solution. The goal is to get the core components of the solution visualized quickly so the development team can provide insights on the direction of the design, including feasibility. The initial investment in sketching is so minimal that there is no significant cost to completely rethinking the direction.
  • Make: Once a general direction is agreed upon, the team elaborates upon the solution through interactive prototypes. The interactive prototypes define the layout, functionality, relative importance or priority of information of the user interface and allow the team to experience the solution faster.
  • Test: Once the prototype is developed, it can be used to test the effectiveness of the design. By conduction usability testing sessions with representative users, the team can collect valuable feedback that will improve or enhance the solution. Based on the feedback received in the usability testing, the team makes revisions to the design concepts. And the cycle continues until all features and functionality are designed an incorporated into the working model.

Through this approach, a small, focused team can quickly prototype a working model that demonstrates the solution within a matter of weeks, instead of months. That difference is huge in terms of velocity, and may be the difference between meeting expectations and leaving your customers dissatisfied.

 

The Importance of Color and the Mind

Color is an important element of visual language in most user interface designs. People process color before they are consciously aware of it., so the colors you choose to use can be the difference between a user-friendly design and a confusing, unusable design. Careful planning and implementation of color will create not only an aesthetically pleasing website, but a functional one as well. Below are ten color –related benefits you may want to consider when creating your next design.

1.  Speed visual search.  Color-coding will help the user stay focused on a certain area of information. This comes in handy when multiple areas of information are being displayed. Color-coding helps keep the eye focused and the information organized.

Screen Shot 2015-03-20 at 3.39.24 PM

2.  Improve object recognition.  Colors should reflect the physical world. Seeing objects that are colored different than real world expectations causes cognitive confusion. For speedy recognition, use colors that are normally associated with objects, e.g., bananas are yellow.

Screen Shot 2015-03-20 at 3.39.08 PM

3.  Enhance meaning.  Colors can be used for emphasis, to display a most important element or message. The example below shows an emphasis on red that gets our attention and clues us to what the site is all about.

Screen Shot 2015-03-20 at 3.40.04 PM

4.  Convey structure.  In addition to speeding visual search, color can structure a page or presentation. It offers yet another form of organization, allowing the user to quickly identify and recognize information.

Screen Shot 2015-03-20 at 3.40.36 PM

5.  Establish identity.  In today’s world, brand identity is the greatest visual recognition element of any business or organization. Color is ubiquitous and is a source of information; incorporating and utilizing the appropriate color palette in your visual design will reinforce the client’s brand throughout the user experience.

Screen Shot 2015-03-20 at 3.41.18 PM

6.  Symbolism.  Color can also be used to represent cultural and psychological concepts. Color in design is very subjective. What evokes one reaction in one person may evoke a very different reaction in someone else. Sometimes this is due to personal preference, and other times due to cultural background. Context plays a large part in color symbolism. One color can have positive or negative connotations depending on the larger framework. Take a look at the “white” website image below. In western cultures, white represents color of purity and peace. In Eastern and Asian cultures, white is the color of death. Understanding the cultural context of your client’s audience can alert you to culturally based color sensitivity. 

Screen Shot 2015-03-20 at 3.42.03 PM

7.  Improve usability.  Colors impact site visitors psychologically, and can affect the user’s experience. In user interfaces, color informs visitors of the most important functions and areas of the screen. Take the user’s need and site functionality into consideration before strategizing your use of color.

8.  Communicate mood.  Color creates mood. Research shows that lighter colors have a more positive effect on users than darker colors. The following link provides examples of colors and the psychology it impacts.  http://usabilitygeek.com/colour-user-experience-psychology/

9.  Show associations.  Color can be used to indicate associations to groupings or other graphical elements. For example, we recognize the U.S. political party colors to be blue for democratic and red for republican. In the same way, colors used in web design can be utilized to help a user identify certain information or functionality.

Screen Shot 2015-03-20 at 3.34.35 PM

10.  Express metaphors.  You have heard of feeling blue or seeing red as metaphors for being sad or angry. Metaphoric inferences can be translated visually in your design.  Utilizing a color like pink, for example, can translate into a young, teen girl experience for a youth clothing store.

Screen Shot 2015-03-20 at 3.24.40 PM

In the end, don’t be afraid to experiment with the use of color to enhance the appearance and functionality of your design. Color has great meaning and will you create an impactful, functional and beneficial user experience.

 Tell us about your color experience and design considerations. Are there specific colors you avoid in your design to improve the user experience?

“5 Quick Ways to Improve Website Usability”-usabilitygeek.com

“10 Reasons to Use Color”-understandinggraphics.com

“Color Theory for Designers” –smashingmagazine.com

Posted in Creative, Design

Accessibility techniques for Front End Developers

Below are some of the basic important techniques a front end developer could start incorporating right from the beginning, into a project that has to conform to WCAG 2.0 standards.

Hierarchical Heading Organization

Make sure the headings on every page of the website is in an hierarchical order, beginning from h1 to h6, properly nested to facilitate navigation and understanding of overall document structure. This will allow screen readers to announce the text as a heading with its level, navigate to the heading markup, thus allowing users to quickly find the content of interest.

Appropriate tab-index

Users should be able to easily navigate the website and access all the elements using keyboard tab key. Tab through all the elements of the webpage after it is developed and check if all the elements can be tabbed through in the manner intended. Double check this functionality for form elements.

Add ‘skip to content’ functionality

This is extremely important when users are accessing the site using a screenreader or navigating the site only with a keyboard. The user need not navigate through all the navigation items before reaching the main content every time they visit the page. An easy way to implement this is, when the user visits the site and hits tab, a ‘skip to content’ link should appear and on pressing enter key, should take him to the main content. If the user wants to scroll through the navigation, he can simply press the Esc key when the link appears. A neat example of this implementation is provided here.

Add screen reader only and aria hidden class

Certain elements need not be shown on the screen reader but rendered only on desktop, and to achieve this add the ‘aria-hidden=true’ attribute for those elements that need to be hidden from the screen reader. Same way, some elements need to be displayed only on a screen reader and to do this, refer to the css framework your application is using. For bootstrap, adding ‘sr-only’ class makes the element visible only on a screen reader and in Foundation, it is the ‘hidden’ class.

Alt attribute

Add ‘alt’ attribute for all the images and visual content used in the website. This is extremely important for screenreader to identify visual content.

Add aria-labelledby and aria-describedby appropriately

Use aria-labelledby attribute to identify the element that labels the current element. This attribute can be used to associate an heading with a region, or to provide multiple labels in a form. A detailed explanation with appropriate examples is mentioned here.

Use aria-describedby to identify the element that describes the object. For e.g., if you have an anchor element on hovering which, a tooltip is displayed, use aria-describedby on the anchor element with the value being the tooltip content. 

Tools and Plugins

Use JAWS for the screenreader, mac OS X voiceover feature, firefox wave toolbar and chrome’s accessibility developer tool plugin.

Adequate User Experience, proper sprint planning, level of conformance

It is also extremely important for designers to keep accessibility in mind while designing the User Experience. Finally, check with the organization on what WCAG level the website should conform to. Read through the guidelines, add them in the sprint planning, let the stakeholders know and implement accessibility measures right from the prototyping stage.

Presenting is a Skill

469740015

If you’ve ever been to a meeting, then chances are you have sat through at least one bad presentation. A presentation that contains a series of slides with so much text that nobody can actually read it. A presenter that takes the time to go through every bit of that text on all 40 slides. Content so bland that it makes you want to fake an illness. And let’s not forget clip art…

Why are these presentations so bad? Is it because the presenter is nervous, or simply not an eloquent speaker? Is it because PowerPoints are inherently painful? No, I believe it is simply that these individuals have not been trained how to present. The ability to present is not a talent that is reserved for only the most charismatic individuals. Anybody can learn to be an effective presenter. They just need to be given the proper guidance and training in order to successfully deliver their message.

Nowhere is this more important than in the consulting world. In my time, I’ve seen many consultants put in a lot of hard work into developing deliverables, only to have them fall flat in a client presentation. It’s not because the deliverables were of poor quality, but because the message was not properly conveyed. A poor presentation tends to reflect negatively upon the subject of that presentation.

dilbert-presentations1

Presentation is a practiced skill. With the proper training and experience you can strengthen your skills over time. Yes there will be times when things won’t go smoothly. For instance, when your presentation is scheduled for an hour, but your client tells you they only have 15 minutes. However, if you start with these 7 basic principles you can avoid many of the pitfalls of the bad presentation.

1. Know Your Audience
Whenever you are presenting, it is essential to know your audience. A technical team may want a very detailed explanation of the topic that consist of 40 slides, however if you’re presenting to a CMO or CIO, your presentation will need to be more succinct and to the point. Knowing your audience will help you create the right type of presentation.

2. Set Expectations
When presenting project deliverables, it’s important that your audience understands where you are within a given process. If it’s only the second week of a twelve week project and you’re showing some early design concepts, then your audience should know that they are being involved early on in the process. That will set their expectations for the completeness of the work they are seeing. It would be a mistake to assume that everybody attending understands the project schedule and milestones heading into the meeting. For this reason, I typically begin my presentations with a project timeline that shows the client where we are in project and what are the next steps.

3. Provide context
Don’t assume the client knows what they reviewing. You know it, you’ve been working on it for the past week, however the client may have no idea what they are reviewing and why they are reviewing it. Take a style tile for example. A style tile utilizes, colors, fonts, typography, imagery and iconography to convey the visual communication of a site without specifying the layout, content or functionality. However without the proper context, a client may interpret a style tile as a mockup of the site. As a result, they may be giving you feedback on elements such as the layout or content, instead of the visual communication. Which brings me to my next principle.

4. Give Direction
Before you ask for feedback on a deliverable, you should specify the purpose of the deliverable and the type of feedback you are looking for. If it’s a style tile, you may want feedback on the aesthetics and branding elements. If it’s a prototype, you may want feedback on the organization of content or specific interactions. Whatever your goals are, if you establish the rules upfront, you will get more valuable feedback.

5. Focus on the Why
When presenting something like wireframe or a mockup, its important to focus on the design decisions you have made vs. the elements that exist on the screen. I’ve seen too many designers struggle because they gave a tour of their design, instead of focusing on the why. When a designer simply points to a feature and describes it “Here is the login box”, they are simply pointing out what the client can clearly see. The message that should be expressed is “We included a highly visible login area on the home page, because it is a primary task for our users coming into the home page. The placement, which aligns with best practice standards, is in the area where users expect to find it.” This type of explanation will validate your design decisions and communicate to the client that every detail of the design has a purpose. Clients want to know that you’ve thought about their unique challenges and have provided solutions that address those challenges. If you and the client agree on the intent, then you can work together to refine the specific execution of the concept.

6. Know Your Material
Nothing is more frustrating than a presenter that just reads the text on a slide or in the above example, just points out what can be plainly seen. If the presentation had all the information that the client needed, then they wouldn’t need you to present. You are a very important part of the message. And in order for you to be effective, you must know your material. That doesn’t mean that you have to memorize every bullet on your slide, or perfectly recapture what’s in the notes. You can simply focus on what you feel are the most important elements and then let your excitement shine through. If you’re excited about the topic you’re presenting, the client will feel it too.

7. Engage Your Audience
This principle goes hand-in-hand with knowing your material. You can’t communicate with your audience if you’re staring at your presentation. As the presenter, it’s your responsibility ensure that you’re audience is engaged. The best way to do that is by putting their needs at the forefront of your messaging. Whenever possible, connect directly with the individuals in the room and address their challenges. Also, pay attention to the feedback you’re getting (verbal and non-verbal). If you’re unsure whether you’re capable of reading body language, check out this article by R.L. Howler (http://www.presentationdynamics.org/read-your-audience/). Focus on the points that are hitting home and gloss over topics that are not of interest. The key is to keep the audience engaged so that you can successfully deliver your message.

Yes, presentation is a skill. It’s something that can be learned, practiced and mastered. It may not come naturally to everyone, but following these basic principles will set you on the path to more effective presentations.

A Glimpse at Wired.com’s Redesign

Looks like the folks over at Wired launched a redesign of their site yesterday.  I was just reading through an article about it written by their engineering director.

http://www.wired.com/2015/03/wired-dot-com-from-the-devs/Wired.com Redesign

I’ll let you creative types comment on the actual design of it, but there are some interesting things they are doing developmentally that strike my…interest.

First, they appear to be using Flexbox, which is an awesome layout tool, but won’t really help you if you need to support older versions of IE.  I’m glad to see a large company taking the plunge and using modern practices to take the web into the future and not being held back by older browsers. I wonder what their browser usage stats are; speaking with Perficient XD’s Manny Muriel, he made a good point:

That is interesting that they are using Flexbox. I just tried their site out on IE8, and it is completely broken. Maybe the amount of hits from old IE are too few for them to care anymore.

Read the rest of this post »