Spark

Subscribe via Email

Subscribe to RSS feed

Archives

Archive for the ‘Design’ Category

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 »

Designing the small details – “Microinteractions”

Dan Saffer's text

Dan Saffer’s text

Part 1 of 2

As a usability researcher it’s important for me to stay aware and informed of guidelines for designing user interactions. Also, I want to be literate about topics within user experience design. So Dan Saffer’s book Microinteractions – Designing with Details caught my attention. His text is interesting; it focuses on the importance of the small details, the small pieces of functionality within a digital design. Saffer thinks these small details are really important because they can be “signature moments” that impact the entire experience of a product. Now that I’ve read his book, I would agree. To illustrate his perspective Saffer has included numerous examples of when a microinteraction created an enduring signature moment, for example Larry Tesla’s creation of Copy/Paste in 1973, and a lackluster one, “the initial intrigue with Google + Circles fell flat against Facebook when sorting users into circles became tiresome and gimmicky.”

What are Microinteractions?

I have to agree with Saffer on the importance of the details in designing, but it’s difficult to always know which design elements are microinteractions. As Saffer would say they “are all around us, from the turning on of an appliance to logging into an online service.” And, these “small pieces of functionality,” as simple and brief as they are, can delight or frustrate us over and over with every interaction. I can think of a situation in which I experienced the feeling of frustration when I had to log into a retail site to access tracking details on my purchase. This merchant’s microinteraction “rule” wasn’t a wise choice because it sacrificed my user experience by adding unnecessary complicatedness. It could have been much easier with an email that contained the shipper’s tracking number linked to the carrier’s site. Read the rest of this post »

This Post Is Late

Why is time management so hard for this creative professional?

wonderlandrabbitgfairy001_vectorized

Morphart Creation

I wanted to go ahead and get that out upfront. My week for writing and posting was last week, and I have this lovely plan to write and post on a semi-regular basis going forward. Like many of the creative people I work with, however, I find I am not always successful at managing my time to my advantage. Sometimes, I’m terrible at it.

Time management is hard. It isn’t simply that we have busy jobs. We are all tasked with deadlines and responsibilities, often managing multiple internal and client projects at the same time. We have busy personal lives. Many of us have kids, and some of us are going to school or pursuing additional training and education. We have creative pursuits and other interests and commitments, plus bills and home or car repairs and doctor appointments and extended friends and families that need us. We have a life and a professional life, and we generally like them both.

The way we manage our time has something to do with the way we think, as well. The creative mind doesn’t like to simply solve a problem or meet a challenge and be done. Our approach includes the tendency to go beyond problem solving to imagining “what else.” We poke at things, and then peel them back to reveal hidden intricacies. We twist them around, sometimes breaking them, yes, but then putting them back together in a new or enhanced way.

Read the rest of this post »

CSS Pixel Ratio (or “How Big is My Phone?”)

When designing and developing a website for mobile devices, there are many things one needs to consider. Are you using a responsive or adaptive approach? What devices / browsers should be supported? What are the major breakpoints? When trying to answer these questions, we as designers and developers tend to focus on mobile device resolutions as a deciding factor, but one thing that is often overlooked when considering the size of a mobile device is the CSS pixel ratio.

Put plainly, CSS pixel ratio (also referred to as device pixel ratio) is the relation between a device’s physical pixels and logical pixels. Especially with the advent of retina screens, the pixel resolution of modern mobile devices is growing at a fast rate. Consider that the iPhone 3g had a resolution of 320×480 px, the iPhone 4s’ resolution was 640×960 px, and now some phones like the LG Nexus 5 boast a resolution of 1080×1920 px. How is one supposed to design a website for all mobile devices when their screen sizes are so vastly different? That is precisely why the device-pixel-ratio was created. Read the rest of this post »

I&I musings – css, Apache, jQuery, web storage and LeanUX

CSS multi-language support

Chiuhua Chen, senior front end developer and prototyping expert at Perficient XD, is currently working on a web application that has a visual design supporting only english language. As with every other I&I Musingsproject, the business later on proposed support for multi-language support. When the application is in another language, spanish or Chinese, due to design constraints, the page appears messed up with some text occupying more width than what is actually allocated. On further research and checking with other peers, Chiu is working on implementing language specific stylesheet which would override the generic css file to take care of this issue. Lead front end developer Jacob Schulke has a few good points on the topic and has already shared his thoughts here. To learn more on how Chiu is tackling the multi-language css support issue, get in touch with her here.

Apache Virtual Hosts

Derek Montgomery, senior front end developer at Perficient XD, with a strong penchant for infrastructure setup and command line coding, is currently working on setting up a new virtual host for Perficient XD and doing further research on the topic, agrees that “If you have made a website, you have probably used Apache. One widely used application of virtual hosts is shared web hosting, whose prices are lower than a dedicated web server because many customers can be hosted on a single server”. He points out virtual hosts can potentially solve problems such as -

  • I have one domain (perficientxd.com), but I want multiple subdomains (e.g. dev., client., etc.).
  • I have one IP address available, but I need to test how multiple subdomains would function(use ports)!
  • Cost efficient, and pretty easy to configure and test.

Read the rest of this post »

Are Two Pizzas Enough?

Imagine being an executive for one of the largest pizza chains in the world and being invited to a meeting titled “Why Two Pizzas Are Enough”. How would you react? Would you be concerned a few zeroes had been left off? I did a contract role as an agile coach for just such a major pizza chain a few years ago. When it was time to give the executive management team an overview of Agile and Scrum (the specific methodology the company was interested in implementing) I was advised to not call the meeting Agile or Scrum. After asking why I should avoid this I was told that the business was sick and tired of hearing about both Agile and Scrum and they wouldn’t come if they knew what it was about. I used the analogy of two pizza teams to grab their attention and boy did I grab their attention! Every Executive attended the meeting.

In last week’s article “Agile and UX Design: Can they work together?” I mentioned the concept of a two pizza team. In this article I give more definition behind this concept and how it applies to agile approaches.2 Pizza Teams

The two Pizza team terminology was coined by Jeff Bezos, founder and CEO of Amazon. You can read more about his concept and how it has become part of the culture at Amazon by reading the Fast Company article “Inside the Mind of Jeff Bezos”.

What is the two pizza team analogy? In Scrum, and most Agile methodologies, the team is meant to be a small, cross-functional, empowered team of approximately 5 – 9 people, depending on the project size. Therefore when your team has to work through lunch or late into the evening, as you know you do when you work on a project, the company can feed the team with two pizzas. I.e. Two pizza teams.

There is more accountability in smaller teams and they tend to avoid the issue of social loafing. According to social psychology, social loafing is the phenomenon where individuals tend to put forth less effort when working in a group than when they are working individually or coactively. Small teams in which each member is accountable for specific tasks for the project will avoid this concern and hold each other accountable on a daily basis for the work being produced.

There is, on occasion, a concern raised with the small number of team members when a project may be extremely large and require more than the recommended 5 – 9 person team. In this event, review the project goals and determine a team structure in which multiple Scrum (or whichever agile methodology is being used) can be structured reporting into one Project Manager or Product Owner (whichever role title your project is using). In many projects a quick review of the goals or epics will show a natural delineation into individual teams. These teams should be able to communicate with each other, but limit the communication paths necessary between the teams. In other words, if team A is unable to complete their work because they must first coordinate with additional teams the project will stall. Minimizing communication overhead while still encouraging communication between teams is a key strategy to the success of multiple teams within the same project.

Try the two pizza team concept when your organization on a smaller scale first. Something as simple as a meeting in which a decision or consensus needs to be reached or if there is a larger problem which you are attempting to solve, break it into smaller chunks and assign a small team to each chunk to solve. See how quickly and effectively these small teams can work. Not only will your problem get resolved, your corporate lunch bill will go down.

Agile and UX Design: Can they work together? Part One

Diet pills and Agile have a commonality – people want a quick fix to lose weight only slightly more than they want a fix to all their project management issues. Unfortunately, diet pills nor agile are silver bullets to correct either concern. It takes dedication, work and an understanding of the principles behind the body’s metabolism to lose weight. Likewise, it takes dedication, work and an understanding of the principles behind agile to improve delivery of a project. Once you understand these principles you can become a two pizza team, improve project delivery and lose weight at the same time.

This is the first part of an ongoing series attempting to not only bring clarity to what it means to be agile, but also to answer the question, can agile methodologies work during the UX design phase of a project? I have heard arguments on both sides of that debate. Many designers saying ‘no’ it doesn’t work and the more traditional waterfall methodology works best. Why? Because you have to business requirements before you can start wireframes and you have to have wireframes before you can start creative design. Before starting creative you have to have a content strategy which depends on the wireframes, which depends on the business requirements and on and on. While I am not arguing these needs I want to explore the possibility of providing these needs within an agile process.

But, before the exploration of this feasibility can begin let’s first define what agile means. I hear the word tossed about to describe a single methodology of project management or software development. Ask a project team what methodology they are following and often you hear “we are using agile”. What does that mean? Each week we change our process because we didn’t like what we did last week? Or, the client wants us to change how we are doing things because they didn’t like what we did last week? That isn’t agile, that’s chaotic and reactive. So, what is agile?

It’s difficult to define as agile is an umbrella term for multiple approaches to project management of software development projects. At the core, agile is a group of methods that enable small, cross-functional teams to quickly deliver business value in an iterative, collaborative approach. Where change is expected, not feared and where requirements can be expanded upon as the team learns more. Where conversation and collaboration are valued over strict adherence to a set plan defined before the requirements are even made clear to the customer, let alone the team.

The agile manifesto describes the values and principles of agile software development practices and I won’t take the time to reiterate them here, but if you don’t know them I suggest checking out that link. The manifesto itself is made up of four key values supported by twelve principles.

Agile Manifesto Values

Agile Manifesto Values

Some agile methods which exhibit these values and principles are:

• Scrum – arguably the most popular
• Kanban
• XP (Extreme Programming)
• Lean Software Development
• Feature Driven Development
• DSDM (Dynamic Systems Development Method)
• Crystal

This is not an exhaustive list of all agile methodologies, but some of the more popular ones currently in use. Which of the approaches to use depends on the team’s knowledge and expertise in each methodology, their culture and sometimes the project goals.

Making a move to agile is a cultural change that impacts the entire organization, not just the IT department. It’s a marathon, not a sprint. An evolution not a revolution. There is compelling evidence that iterative methods reduce project risk, compared to more traditional waterfall approaches. Next time we’ll move into the discussion of bringing Agile and UX together.

In the meantime, have you been involved in a cultural shift to using agile? What pain points did you find and how did you resolve them?