Spark

Subscribe via Email

Subscribe to RSS feed

Archives

6 Tips for Staying Fit at Your Desk Job

The majority of jobs that we hold have us sitting at our desks from 8am to 5pm, five days a week. That’s 40 hours of sitting, typing, and talking. Sure, we walk to the bathroom, we walk to get coffee, but when I tracked my steps for an average day in the office, I was at around 3,000. For comparison, it is recommended that we walk 10,000 steps a day.

Many of us have difficult schedules and conflicts that don’t allow us to workout at the crack of dawn, or maybe we have to pick up the kids from school after work, so that is shot, too. Even though your schedule may not allow for you to carve out 45 minutes a day to work out, here are a few tips for staying “active” while sitting at your desk.

  1. Take a lap!

So it only takes you 15 steps to get coffee or go to the bathroom? Instead of taking the closest route, take the long way! For example, walk a lap around your entire office, get coffee/go to the bathroom, and then take another lap. This activity will easily add at least 100-200 more steps to you daily routine.

  1. Invest in a stability ball

A pregnant co-worker of mine was the first in my office to bring in a yoga ball to sit on to help with her symptoms. While this does help ease those side effects, it’s also very effective if you’re not pregnant! In a study done by the State University of New York Buffalo, people who sat on a stability ball burned 4.1 times more calories than those that sat on a chair. This may not sound like much to you, but it adds up to more than 160 additional calories burned each week and 640 additional calories burned each month. Buying a stability ball doesn’t have to break the bank! Target, Five Below, and Wal-Mart carry quality stability balls that will meet your budget.

  1. Utilize your lunch break

This may not be an option for everyone, every day of the week, but if you do have 45 minutes to an hour to step away from your desk, why not use that time to burn off that morning donut your co-worker brought in? Instead of going out to lunch or spending noon to 1pm eating at your desk, head to the gym when time allows and eat at your desk afterwards. Your workout doesn’t have to take up the entire hour if you spend your time wisely, plus, it gives you an extra boost of energy for the rest of your day!

runner_in_san_francisco_shutterstock_wordpress

  1. Take the stairs

Because most office buildings have elevators, it’s a constant temptation to just hop on and press go when you have a million and one things in your hand. Try to make it a habit to take the stairs, always. If you park in a parking garage, park on a higher floor and take the stairs down. If your desk is on a higher level, take the stairs (if you happen to be on floor 50 for some crazy reason, walk at least 5 flights, then take the elevator). One flight of stairs, three times a day is equal to burning 15 calories. That may seem small in hindsight, but that’s 75 additional calories burned a week or 300 a month. Work towards making this a habit and it will be easier every time!

  1. Enjoy a walking meeting

If possible, instead of sitting in a conference room for your discussion, take a few laps around the office or go outside. Walking around the office gets the blood flowing, sparks creativity, and is a good way to communicate without technology being a constant distraction.

runners_feet_shutterstock_wordpress

  1. Drink more water

This tip is simple and FREE! Everyone should drink at least 8 glasses of water a day, which equals 64 oz. I recommend getting your own glass bottle for your desk and keep it full as much as possible. Whenever you go to the bathroom or fill up your coffee, fill up your water bottle as well. Continually drinking water throughout the day will keep you full, make your skin glow, flush out waste and bacteria, and keep your body at a normal temperature. Swap that Diet Coke for a water and reap the benefits of that H2O.

Posted in News

5 Quick SEO Tips

1. Put your users first and search engines second. Providing a great user experience and creating valuable content for your target audience, will positively impact your Search Engine Optimization efforts by default.

2. Best practices are just that. Even though we have several best practices for different SEO factors, if something doesn’t make sense for your business or customers, then you should not obsess over it.

3. SEO is not a one-time or a stand-alone activity. SEO should be part of the overall Digital Marketing strategy and should be implemented throughout all digital efforts (press releases, social media, blogs, webpages, etc.)

4. Learn from the past, don’t take short-cuts and follow your gut. If it sounds too easy to be true (e.g. write articles just for backlinks, or “sprinkle” keyword X as much as possible on the copy), you will probably have to pay for it later. Search engines will only get smarter so do things the right way, and ask yourself if it adds value to your human users before proceeding.

5. It is a joint effort. If you are working with an agency it is critical to work together in order to succeed. Nowadays you can’t expect to outsource SEO work, let them “do their magic” and appear on the first page of search results. Having good communication and making sure SEO consultants are involved with the digital marketing team is key.

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

Client side Templating and Performance

A lot has been talked about client side view templates hindering the critical path, thus affecting performance. I have made an effort to summarize the need for client side rendering and measures to enhance the performance.

Before we actually jump on to measures, lets revisit how today’s web application ended up being rendered and compiled on the client (browser) using javascript based templates -

Before the advent of nodejs and javascript templates, how did one used to render json data on the browser ? 

Front end developers (FED) used to write prototypes based on html, css, jquery and hand this over to the backend developers. Backend devs take this asset and integrate it with the java code, parsing the json themselves directly in the servlet or jsp. Here, it takes only one call for the page to load and FED can focus on optimizing critical path, gzip the assets, etc thus improving the performance. This really worked well when we had only one or two FEDs for the whole project and a waterfall approach was followed. Designers used to provide the comps, UI developers created pixel perfect prototypes, and no design changes were allowed once the development started.

And then, what happened ?

Coming back to where we are today, as the web evolved, more focus is put on User Experience, and with the introduction of LeanUX, design and development are being done simultaneously. Now, backend developers cannot change the html in the jsp or servlet every time the design changes and becomes frustrating for them and they don’t see the need to do that at all. Enter jQuery and ajax. FEDs can make an ajax call to the RESTful service, parse the json and render it on the presentation layer, i.e jsp. But, this resulted in a convoluted mess of spaghetti code and became hard to maintain as the application grew. 

Same time, javascript became more mature and nodejs was introduced.  With the help of nodejs, enter client side templating – handlebars, mustache, htmlbars, etc. These templates are logic less (no if, else, for loop statements in the html) and provided a clear, neat separation of html and data paving the way for a true MVC architecture on the client. Both front end developers and back end devevelopers are happy as FEDs can focus on neat reusable, DRY html with dynamic data while backend developers can focus on generating the RESTful API service, data binding and need not worry about design changes at all. Because, data parsing is completely done on the browser now. To help with this data parsing and templating for the FEDs, a host of task runners to improve performance, based again on nodejs got introduced – grunt, gulp, etc. So that, FEDs can focus on the html and the task runner can do all the performance optimizations for them. Wonderful, isn’t it ?

So, what is the disadvantage of this client side templating ? 

With client side templating, every ajax call we make, there is an extra http call on the browser, and the template has to parse this data as well as render itself on the browser. Enter performance issues and critical path rendering.  

How to remediate ?

Fallback to nodejs for solutions again. Client side templating is still fairly new and as the web progresses, definitely the focus will be on ways to render the data on the server itself. There is already htmlbars, which is out to do that as mentioned herehere and also here.

Ultimately, the advantage of separating html from the backend code and allowing front end developers to make robust design changes concurrent with the development cycle has proved more advantageous, than the performance issues with the client side templating.

Take the Plunge. Get Up to Speed with Front-End Build Tools

A colleague recently asked me to give him a high-level overview on how to get started using these fancy front-end build tools everyone’s talking about. Since I’m a team player, I thought it would be best to share my advice with all of you as well!

First, what the heck am I talking about? What are “front-end build tools”? Simply put, there is a community of people and a whole bunch of services out there who just want to make it easier for front-end developers to build projects. Their motivation? Why go through the hubbub of setting up your working directory structure, downloading the plugins and libraries you need, writing scripts for minification, etc., when all of that can be automated?  Enter the realm of build tools.

Now that you know what they do, how do you use them? I fully support the idea of learning by doing, so my job here is to introduce you to your new friends, and let you guys get to know each other on your own time. Have fun!

The Tool Trifecta

Read the rest of this post »

Conducting User Research: For Dummies

decision_shutterstock_wordpress

Conducting User Research: For Dummies

As someone who has never conducted her own user research test, but has listened in on a handful of interviews, I’ve found a great interest in learning about the habits and preferences of the interviewees. I have been stuck in the suburban Midwest lifestyle my entire life, and sometimes fail to realize there’s life outside of this bubble I call home. Listening in on these interviews brings me back to reality and makes me want to learn more about the different behaviors of consumers.

When listening in on a interview for a home improvement/agriculture company website redesign, I was shocked to hear about all the different ways the people in that location were currently using the company’s website.

Some used it solely to check if a product was in stock, then would drive to the store to pick it up. Some users would order their product online ahead of time, then complete an “In-Store Pickup”. Others were unable to request at home delivery because their address was in too rural of an area.

Watching the users interact with the wireframes sparked my interest in the different ways users interact with a product based on their demographics as well as location. So, what are the basic steps to conducting your own user research (“for dummies”)?

UR

Objectives

The first step in the process is to determine the question we are trying to answer. What should we know at this point in the process? For example, when shopping on Nike.com, do users prefer a drop down menu or to see the products listed on the home screen?

Hypotheses

Secondly, we need to determine what we already know. What are our assumptions? Going back to our Nike.com question, we may believe that users will prefer a drop down menu so that it doesn’t take up as much space on the homescreen.

Methods

The methods will address how we plan to fill the gaps in what we know. Based on our timeline and whom we are interviewing, what are the best methods to conduct user research? For Nike.com, do we want to do in person interviews, watch the user interact with the website, give them a survey, ask them to complete specific tasks, give them a “to-do” list to complete with a partner, etc?

Conduct

During the fourth step of the process we will gather the information we need from the methods we determined would be the best fit for this particular test. In regards to our Nike.com test, we will take notes and record user interactions with the website. Do they find it challenging to navigate? Easy? Are there particular products they are having a hard time finding? These are the questions and answers we need to take note of.

Synthesize

At the final step, we will work to answer our original question(s), and either prove or disprove our hypotheses. From this information, we will work to make sense of the results and use those to determine what opportunities exist for our future design plans. When we look at how our hypothetical user interacted with the Nike.com website, we noticed that they had an easy time navigating the drop down, and preferred that it didn’t take up much space on the homepage. In this instance, we have proved our hypotheses and will plan to create a drop down menu for Nike.com.

Posted in News

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 »