Many 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:
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.
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 –
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.
A few of my coworkers and I recently went to the How Design Live conference in Chicago, IL. I would have to say that taking the train there was actually really enjoyable and the right decision. We were able to get some work done so by the time we got to Chicago we were all set to tackle the conference and the city. When we arrived there we realized that there was an opening keynote speaker and booths set up with a bunch of different companies. We grabbed our swag and did some networking! Of course, the next day was more serious as we started the day off early to take in as many of the speeches as possible. After two long days of soaking in as much knowledge from amazing leaders, we were left in an inspired daze. But I wanted to share some of the key takeaways of the conference that seemed to be repeating themes:
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.
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.”
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 »
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 »
Whether you are redesigning your website, working on your content strategy, or simply managing web content, it is important to take the time to review and catalog existing content by putting together a Content Inventory. Here are five reasons why:
1. Discover. It is very common for different people to publish content on a site and to not have a plan in place to review it, making it harder to get a big picture of the existing content. A Content Inventory allows you to dedicate the time to go through every page and click on every link, and discover content, blank pages, and broken links.
2. Understand. Meanwhile going through the tedious process of cataloging everything, you will start getting a better understanding of the types content, and you will likely notice differences in tone, user experience, look and feel, etc. (always have a “Notes” column to capture all of this.)
4. Organize. Once you have accounted for the existing content and you are aware of the content strategy, you will be able to answer the following questions and make decisions:
5. Manage. After organizing and taking action, update the content inventory. It is important to schedule time to periodically update the inventory, audit the content, and train any new content creators, curators or publishers, to avoid losing control and to make sure everyone is on the same page regarding the overall content strategy.
I may be taking a risk here, guessing that you know exactly what my title means. But I’m willing to bet that you understand the abbreviations I’ve chosen because of the audience this blog reaches.
Abbreviations and acronyms have become part of our natural vocabulary. Both are useful in quickly communicating a big idea using a small space: fewer letters and syllables, smaller visual blocks in a design, and less time to speak or read.
If your company is like most companies, you and your coworkers have developed your own “shorthand” vocabulary. You have reference documents, processes, and systems known by the first letters of the actual name or phrase. You may work with clients or vendors whose names have been simplified to their initials and many clients have specific company-used abbreviations.
Abbreviations are, basically, linguistic shorthand constructed of ideas known by a shared group of people. Some abbreviations are easily adopted, and others (for me it’s the text phrase “smh”) never seem to sink in and fail the quick comprehension test.
Acronyms are abbreviations that can be pronounced, triggering audio recognition and the mouth feel of a tangible idea. In English, this is achieved by a combination of vowels and consonants that create the mix of hard and soft sounds our brains identify as words. Mignon Fogarty of Grammar Girl provides a great overview of acronyms, abbreviations and initialisms.
The differences between the two are important, and relevant to user experience considerations and decisions we make on every client project. Consider the following:
ASAP, ETA, EOD, CSR, CSS, SME, IBM, DIY, SOW, CMS
NASA, SONAR, NULL, FAQ, CAT, FIFA, UNICEF, RADAR, TARDIS, FedEx
How many of the above have a single, quickly defined meaning for you?
Acronyms and abbreviations are helpful communication tools, but does that mean they are the best way to communicate with your audience? What if English isn’t their first language? What if they were raised in a family that couldn’t fit multiple smartphones in their budget? What if they were born before cellphones were commonplace?
The key benefit of acronyms is they are structured for recognition and easy recall by an audience. As the list above demonstrates, acronyms are frequently successful for naming a product or key concept or business. On the other hand, the use of commonly understood abbreviations can quickly communicate audience and industry relevance to the people looking for you online.
Recently, I’ve also been hearing my coworkers voice their frustration with the overuse of acronyms. Combined with our use of social media channels, part of this frustration may be “translation fatigue,” the resulting mental, and sometimes physical, lack of energy people experience when language – and any content – is not clear to them.
Fatigue kills enthusiasm and negatively impacts a user’s perception of a company or brand. It is a particularly important consideration when dealing with very technical information and internal communications. When considering the organization of content from multiple sources or developing a framework for a complex project, we need to provide the reader with an easy path to clarity.
Glossaries that include the most commonly used abbreviations and acronyms can be quite helpful and need to be developed with a plan for updates and review. Duplicate abbreviations should be identified and resolved as quickly as possible. Then deliver definitions and assistance in context, on an as needed basis. As a user experience team, we must research and understand the audience reaction to the use of abbreviation.
Check that abbreviations aren’t easily confused with or fighting against already established definitions. The abbreviation CSR, for example, has multiple definitions: Customer Service Representative, Corporate Social Responsibility, and Customer Sales Receipt, to name a few. If our client has a “Conductive Solar Responder” product to promote, we need to encourage them to explore other variations and recommend against simple abbreviation.
When working with clients and considering the use of contextual shortcuts, testing and contextual review are important, but should be augmented by our combined experiences in and out of the office. People are accessing your content as part of their daily routines; there are distractions, tasks and other conversations to compete against. We need to consider whether the user will have the same understanding of the abbreviation as we intend. We’re busy people, too, and so are our clients. We can all relate, and we should relate. TTYL.
Earlier I posted on the importance of designing the small details (aka, microinteractions) with as much care as we design features. Dan Saffer, the author of Microinteractions – designing with details, refers to them quite simply as “small pieces of functionality.” He goes on to say they tend to be simple and brief, and either delightful or frustrating.
Designing rules, start with the goal
In this post I wanted to focus on the “rules” that guide creating a satisfying microinteraction. As Dan would say, we need smart rules to guide smart interactions. Rules govern how the microinteraction can be used or “played.” So before I can make a rule for a microinteraction I have to decide on its goal − intended purpose – which is simply the end state of the microinteraction. A cautionary note from Dan’s book is to “make sure the goal isn’t a step in the process.” So for example, I want users to login to their Pandora account; that’s the goal, the end state. Prompting uses to enter their login information is a step in the process. The main thing to remember here is that when designing microinteractions, keep your goal in mind so that the interaction will be successful.
From my experience the point of crafting good rules for interactions, in this case microinteractions, is that it affects the user experience by “determining what happens and in what order.” Rules are by nature limiting to users so instead of creating an experience that might feel confining, it’s better to design to create a natural flow so users are “gently guided” through an interaction.
A rule that worked!
A recent project comes to mind where we created an important rule so that the employees of an intranet portal would be satisfied with a key microinteraction – finding some specific things. Through user research we learned that employees had too much trouble finding their paystub, 401k, timesheet, job listings and health benefits (to name a few) in their current intranet (i.e., too many clicks and too much hunting around). So, our goal was to reduce unnecessary complicatedness. To achieve this the information architect created a rule to replace multiple tabs, which users had become accustomed to, with only two mega drop-down menus. Those menus stored the main categories of information along with specific keywords such as “job openings.” In usability studies, we learned we had made the right choice; for example, we found that the categories within these menus were easy to discover, and better still, just one click away. If we had asked users ahead of time if that was a good idea, it’s likely all would have wanted to keep tabs. We confirmed in testing that our rule was solid and participants “got” the paradigm shift and liked it.
Rules of thumb for microinteractions
As you design a microinteraction, there are some rules of thumb to be continuously thinking about so that your designs are usable, even satisfying.
Know as much as you can about users, their context of work and their environment. This is by far the best way to know how to set the goal, create the rules and design the interaction. And, know as much as you can about the previous and current behavior of users. Like the previous point, when we have this data we can use it to predict or enhance the microinteraction and to make smart choices and good defaults.
Decide how much complexity and decision-making the user must “absorb” and how much will be absorbed by the product (i.e., system). Taking my earlier project as an example, we had enough research under our belts to know that employees would be more than happy to relinquish control of the task of finding new job listings, or their pay stubs for instance, to gain the benefit of an easy to use experience. As Dan put it, “computers are simply much better at handling some kinds of complexity than humans.”
Here are some tasks Dan advises the product / system handle for users:
Limiting the number of options you give users is typically the best way to go; and, it’s better to create smart defaults than to make users work harder than is necessary to complete a task. Dan advises being “ruthless” about eliminating options. This, in turn, reduces the number of rules you have to create. Another bonus.
Design for perceived simplicity and avoid operational simplicity whenever possible. With perceived simplicity, a single control does multiple actions and that is better for microinteractions performed repeatedly.
Design microinteractions to prevent users from making an unintended choice, a mistake. Good design should do everything in its power to prevent user error.
A final rule of thumb, don’t forget about microcopy (labels and instructional text) as part of understanding how to craft good microinteractions. Don’t use instructional text when a good label will do the job and when you do need to include text, keep it as short as possible.
A last thought
Keep in mind that the most important rule of microinteraction design is knowing what the user is intending to do, what is he/she finds meaningful and valuable.
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.
The Lean UX process involves 3 core steps:
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.
Last week I read an article about cell phone usage that summarized where American adults are using their smartphones most often, and how it’s affecting their day-to-day personal interactions. This information was astonishing and saddening all at the same time, reflecting these eye opening statistics:
I will be the first to admit that I myself have a hard time putting down my phone at the movie theatre or when I’m out to lunch, but I’ve come to realize that it’s completely disrupting the way people interact with each other “in real life” or without a cell phone present. People make significantly less face-to-face contact and are not as engaged in the conversation as they would be without a cell phone nearby. I feel that if I’m speaking with someone while they are scrolling through Facebook or checking their email, they aren’t listening as well or as engaged in the conversation. It almost feels as though nowadays, people don’t know how to engage in a conversation without their “security blanket” i.e. smartphone in their hand or their pocket; they need something to look down at if they don’t know how to respond.
This just as easily translates into the work environment. Everyone has their cell phone in hand, ready to answer a call or respond to an email. When giving a presentation, how many people are on their cell phones while “listening” to the presentation. “Even without active use, the presence of mobile technologies has the potential to divert individuals from face-to-face exchanges, thereby undermining the character and depth of these connections,” reads a study from researchers at Virginia Tech.
In addition, Forbes recently interviewed Molly Ringwald about “The Breakfast Club” 30 years later showing. When Forbes asked what the movie would look like if it was made in 2015, her response was, “No one would have talked. We would have all just been sitting there with our phones texting our friends.”
For Valentine’s Day I went out to a nice restaurant in New York City with my boyfriend, dad, and step mom. We didn’t even make it to the appetizers before my stepmom was “checking in” on Facebook and my dad was tracking my younger brother and sister via a family-tracking app called Life360 on his iPhone. This brings up my second point; while cell phones can get in the way of daily social interactions and important dinner meal conversations, they also bring a sense of comfort and security to the engagement. While my younger brother and sister are old enough to be left alone, they often walk from Starbucks, to a friend’s house, to a pizza place, to another friend’s house, and back to the local ice cream shop, which can be worrisome to most parents. By having Life360 readily available on their phone, my parents are less stressed about leaving the house for a long period of time, and are more apt to be engaged in the dinner conversation. My dad may check the app a few times to see their whereabouts, however, he doesn’t have to call them, leave a voicemail, worry about them lying about their location, or even spend time texting them back and forth while at the dinner table.
So, what is your perception on how cell phone usage is affecting the way you interact with your peers?
No doubt you have heard the term gamification, and maybe you have already designed an application using this relatively new interactive strategy.
Here, we’ll define the term, review the fun behavioral science behind the scene, and wrap up with some practical concepts. (If you reach the end of this blogpost, you will get your Spark-Blog Diamond Badge!)
What is Gamification?
Rewards for actions or thresholds.
That’s it! In the science discussion we will use terms like motivators, variable-ratio scheduling, and human need analysis. But its simple: human behavior demands recognition and status symbols. In the real world, we have thrones, crowns, sheriff’s badges and corner offices. These now have the digital analogs of avatars, points, scoreboards, challenges, levels, quests, badges, rewards and “social graphing”.
Let’s consider an example of gamification. Below the training site Treehouse uses colored shapes, game cues, and flat/game-board design to draw the user in ( I like the blue badge). Notice the game-like directions, a 1-2-3 seemingly easy and achievable process resulting in the “win”: in this case, a dream job.
Does Gamification work?
These companies and hundreds more see result from gamification via accelerated feedback cycles, clear goals and rules of play, a compelling narrative, and tasks that are challenging but achievable.
The Psychology of Gamification
Lets start with B.J. Fogg, and his model of Behavior. His model has three parts: Motivation, Ability and Trigger. Let’s focus on the first factor, Motivation. What motivates us are needs. Human needs have been identified in this order:
Needs 3, 4 and especially 5 are the gamification sweet spot: we want to belong and we need self-esteem: these derive from self-actualizing acts that benefit ourselves. Here we begin to collide with another behaviorist you may remember, BF Skinner, of the school of Radical Behaviorism which involves reinforcement via operant conditioning.
Skinner did research on learning and motivation that used a criteria of “reward scheduling”, that is: when, how many, and at what rate rewards are given or removed? He found that a fixed-interval schedule like a countdown or appointment is useful for established behaviours – like driving. But to maintain or spur new behaviors, a variable-ratio schedule is far more efficient: think surprise. This is called an operant conditioner and explains, for instance, the motivation for gambling addiction.
At a recent TED talk, Tony Robbins made the case that our primary psychological need is certainty, but the second is uncertainty. This supports Skinner’s findings: we want the jack-in-the-box, the gotcha-moment in the movie …the unexpected positive reinforcement. This is the core driver of gamification.
Working with Gamification
Gamification is now a mainstream UX strategy. Platforms such as Bunchball’s “Nitro” are now deployed by companies like IBM, who use it to increase usage of their Connections product (USA Networks used this as well). But many applications can integrate gamification into their UX from the design git-go.
Towards this, here are some tips:
There it is, Happy Gaming everyone. And if you have read this entire blog post, thank you.. Here is your Spark-blog Diamond Badge!
Links & Further Reading
A good review of samples is in an Information Week article http://www.informationweek.com/7-examples-put-gamification-to-work/d/d-id/1104211
That’s what happened when Deloitte gamified their Deloitte Leadership Academy (DLA).
Anthony Robbins enters the picture with his set of human needs (TED talk 2006) http://www.ted.com/talks/tony_robbins_asks_why_we_do_what_we_do.
IBM is using a company called BunchBall’s platform Nitro