Spark

Subscribe via Email

Subscribe to RSS feed

Archives

Follow Us on Twitter

What Does This Icon Mean? The Answer

On Monday I showed you an single icon from NPR One’s website, and I asked you ponder what you might expect to happen if you clicked on that icon, then to post the name you would give the icon in the comments.

It’s friday. So, I’ll make good on my promise to reveal the true meaning of the icon in question.

Read the rest of this post »

What Does This Icon Mean?

In his blog What Happens When You Push the Broccoli Button? Brian Flanagan brought up a great point about iconography.  A few hours later after reading it, I misinterpreted the meaning of an icon on a website. I showed the icon to Claire, a co-worker, who guessed something completely different would happen upon clicking the icon than I did, yet we were both wrong. Inspired by this coincidence, I’d like to know what you think the icon means.

Read the rest of this post »

Say This Not That: Effective Design Critique

Whether you are a designer, non-designer, or client in the IT industry, you will certainly be involved in design critique at some point in time – visual designs, prototypes, images, or sketches. This post indicates common mistakes during a design critique and how to provide actionable feedback to the designer to produce the best possible design. Critique is “a formal discussion of the good and bad points of a particular design.”  This is the first post of a two-part series using the “Say This Not That” format.

Instead of saying… “Make it more modern”

Try saying…“Could we use a mobile navigation style like the [example app]?”

Examples, examples, examples! “Modern” is not specific enough to elicit an action from the designer. To best communicate what you consider as “modern” design, provide examples – preferably examples in the relevant industry. If you are someone without a design background, giving examples is a productive way to communicate to the designer. Also, take note of which aspect of the design needs to be updated to achieve modernity. Is it the interaction that seems old-fashioned? Or is it the color palette? Perhaps the imagery? Just remember, the more specific you are with designers the better they will be able to understand what you want and produce it.

What are some common miscommunications you’ve experienced or observed during a design critique? Share in the comments!

Sources:

Cascade SF Meetup Group with Braden Kowitz from Google Ventures

http://www.meetup.com/cascadesf/events/201673572/

http://www.eleganthack.com/

https://www.wordnik.com/words/design%20critique

http://www.differencebetween.com/difference-between-critique-and-vs-criticism/

Posted in News

Design for Users with Limited Literacy Skills (UXPA 2015)

mobileI was surprised to know that designing for people with various forms of literacy issues would benefit literate users. In one study presented in a session I am now attending, I learned it does! Another surprise, about 50% of U.S. citizens report some type of literacy problem. As a result, when we think about digital transformation and designing for multi-channel usage (especially mobile), there are some things we need to know to help our clients understand the wide range of users who are using their digital products, for example…

– Literacy issues are often merely a result of “situational literacy.” For example, health data is very domain specific and people are often more overwhelmed trying to understand a diagnosis, to sort through health plan coverage or to follow directions for how to take and submit a lab sample. Read the rest of this post »

The UX of Enterprise Applications – What’s So Different?

shutterstock_268845611 (1)The UX of enterprise applications has typically lagged behind consumer applications. Look at the way you order a product from Lowe’s or Amazon, and it’s click, click, click, done! That’s what consumers are used to, and it’s reasonable to expect that every digital experience will be simple.

Enterprise applications have significant differences that challenge design simplicity – a challenge that UX practitioners have been working to meet. Enterprise application development can be a paradox. Good design often emphasizes simplicity and ease of use. But how do we achieve simplicity with all the security and technical concerns, business processes, and compromises across business units to consider? These add to the complexity of the design and development process.

Below are some characteristics that differentiate enterprise UX from its consumer counterpart:

Context of use is different. Business, not pleasure. People use enterprise tools because they have to. Intranets, portals, CRM applications, order entry systems and the like are used by employees and are the only option for completing necessary tasks. Often, these tasks are complicated by required business rules and processes that don’t exist with consumer applications.

Enterprise applications aren’t “sexy.” Always consider context. Saying that a CRM application needs to be “sexy” is like saying a 90 year-old grandma’s going to the nursing home but needs to shop for a bikini first. Purposeful, efficient design trumps “sexy” every time.

Stakeholder vision doesn’t always align with user needs. A shared understanding among the UX team and stakeholders about user needs is critical. The need to gather knowledge of user tasks and processes – gathered from actual users, not user proxies or alternates – should not be overlooked. Very often stakeholders will provide input and have never or will never actually use the application. Real user feedback will provide insight so the team can have the same vision.

Enterprise applications are complex, task-based systems. For enterprise applications are largely task-driven. Tasks are often complex, involving multiple steps with multiple security checks. Multiple departments/divisions have to weigh in. Tasks are seldom isolated, so a holistic understanding of the process and environment is required.

Personas often include Super Users and Casual Users. Desired functionality and features can differ for each group. For example, with a CRM application, a sales manager might use a sales tool a few times per week, maybe once a day. A sales rep might use the system every day, 4 hours per day. And both likely use the system differently for very different tasks. Even in the same role, there are differences. Some sales reps with more accounts may use the system more, for examples.

Mobile isn’t always a given. Some tasks are so complex and involve so may steps and checks that completing them on a mobile device would be too cumbersome and time-consuming. In a recent research study I conducted for a manufacturing client, a user said “If I had to enter all of this information on my phone or tablet, I’d shoot myself. I’d never use this tool on mobile.”

Because they are task-based, it makes sense to think in terms of their simplest, most direct execution. However, context of use is key. For example, if an application is only installed and used on desktops in-house and there are no plans to migrate to mobile, there is no need to spend time and resources on a separate mobile experience.

This is not to be confused with the wider value of responsive design where mobile principles are inherent. It’s still smarter to design keeping mobile in mind, even if it is five years down the road.

Enterprise apps have to balance user needs, system capabilities, business rules and stakeholder goals. The discovery phase is key to determine use cases and common scenarios. Talking to users, analyzing tasks, understanding processes all help to set priorities for project work. What other distinctions can you share? I’d love to hear your thoughts.

5 ways learning to code can improve your life

 

Image of scripting codeMy first crack at writing computer code came when computers were sofa-sized and the term “web” applied mainly to spiders. At my high school, programming was the alternative elective to woodworking and home economics. It wasn’t popular; throughout my four years there, I could count on my fingers and toes the total number of students who took the course.

Today, my grade-school-age nieces and nephews can field coding questions that eluded me until well past college, and each year the starting age of coders keeps sliding lower.

This is the new normal. Children who barely know how to tie their shoes are acquiring the literacy demanded by our increasingly digital world. Before this decade ends, a whole generation of educated Americans will pass from kindergarten through college without ever touching a pen or pencil, or a piece of paper.

Meanwhile, adults who raise these savvy students still lag in this key area of digital literacy two decades after the Internet dawned. Most are clueless about the code that shapes their world. This cluelessness is bracketed by reluctance and intimidation – at first glance, coding does not look easy, so obviously it isn’t easy, right?

On the contrary. Websites such as Codeacademy, Khan Academy, and W3Schools remove much of the guesswork with step-by-step tutorials and workspaces that show what the code displays as it’s typed. Apps including Hopscotch, Lightbot, and Udacity’s series of Android and iOS training tools cross age groups and knowledge levels and are designed to match the comfort level of each.

These user-friendly tools are making code approachable, even fun – much more fun than slogging through those disturbingly dense manuals that were the primary coding assets in my youth.

With that fun comes something else: an education that extends well beyond the scope of coding’s intent. Learning to code also promotes:

Literacy Software has become a linchpin in our lives. Many daily tasks – from watching TV to making toast to turning on a water faucet – rely on devices that in turn rely on software. While it’s not necessary for each of us to know exactly how coding operates any of these things, an appreciation for the analytical process that went into the software programming opens our minds to the way digital devices “think,” thus raising a broader digital awareness that enables us to make software more responsive.

Problem solving That analytical process derives from computational thinking, an approach to solving large problems by breaking them down into smaller ones. We’re introduced to this kind of thinking early in school to solve basic math problems and expand upon it later to tackle business, engineering, science, music, project management – anything that deals in abstractions. Learning code hones that thinking because it requires a systematic approach essential to problem solving.

Personal growth At first, my interest in learning to code was blunted by fear of failure (Everyone starts out writing bad code; it’s unavoidable). I dreaded the prospect of typing line after line of code only to see the wrong result – or worse, no result. This prompted me to code with care and check my work at each step. Of course, I still failed with predictable regularity, but I was slowly steeling myself against disappointment knowing the amount of care I exercised. Today’s code-training tools mitigate that kind of fear by showing results in real time. They don’t, however, mitigate the failure chronic to solution-based code writing; that comes from the exacting task of writing and rewriting the code until it’s correct.

Community Nobody I know who can code well learned by themselves. Sure, they sifted through manuals and guides at some point in their education. But the lasting lessons and best solutions to problems came through asking questions, working in groups, and studying others’ successes and failures. Despite the stereotypical image of the solitary coder hunched over a dusty keyboard, illuminated only by the screen’s glow, coding is a communal effort shared across a room or across a continent. So, it’s safe to say the best programs are developed with precise amounts of code and liberal amounts of collegiality. As content strategist Anthony Wing Kosner said, “Once you write something as code, others who can read code can evaluate it and see if you indeed have a unique idea that can generate value.”

Change – Digital awareness, critical and computational thinking, unwavering determination, and a willingness to reach out to others – these are qualities that effect change in an office, a business, an industry. The more we know about our digital world, the more likely we can make it more responsive, and more responsible. As with anything else, big changes start with the little details – such as learning how to write computer code.

Decoding the UI Architecture

With the increasing advent in SOA and RESTful based applications, all the business logic today is being pushed to the client. With numerable paradigms being present for the UI to consumes these services and create dynamic content, there becomes a need to define the presentation, structure and behavior of the User Interface.

While working with Brian Flanagan on a recent project, we came up with an architecture presentation to address this need, with an intent to help the business, customer, stakeholders and development team understand the architecture of UI/Front end development. 

UI Architecture

Presentation Layer

The Presentation Layer is mainly composed of CSS components, based out of an atomic design or BEM methodology. The CSS is typically written in either SASS or LESS (today’s most popular CSS pre-processors) and compiled to provide modular, scalable components, which is used to create the structural layer.

Structural Layer

Here, we create the html components/pages for the application, by making use of the structure today’s most popular frameworks provide – bootstrap, foundation and others, depending on the organization needs. The required user interactions are enhanced by making use of a JavaScript library, typically, jQuery. These HTML pages are then thoroughly tested for responsiveness, browser compatibility and accessibility. 

Behavioral Layer

The behavioral layer introduces the business logic for our UI by consuming the RESTful services and creating dynamic content. This could typically include two-way data binding, ajax, MVC and Single Page Applications, all rendered on the client.  There is an increasing number of frameworks to help us work with the business logic and the most popular one’s are Angular, Ember, Backbone, ReactJS among others. Note that selecting an appropriate framework is a very important task as each framework has its own pros and cons catering to different needs. 

Production Layer

Finally, we have a bunch of fantastic build tools that takes care of all the routine tasks involved in development such as compiling, minifying, compressing, package management, among others. The build tools keep a track of changes in all of the above 3 layers and eventually provides us production ready HTML, CSS and JavaScript assets which can now be integrated with any backend application.

I hope this article explains the UI architecture and the underlying processes. Is this something similar you have seen implemented in your project/organization ? Are things being done differently or do you have another perspective on this ? Do let us know below.

Bing Webmaster Tools: 5 Steps to Verify Your Website

1. Visit http://www.bing.com/toolbox/webmaster/

  • If you have a Microsoft account, sign in.
  • If not, create an account.

 

2. Once you log in, you will see the Bing Webmaster home page called “My Sites”.

  • At the top, enter the website you want to add to your account.
  • Click the “Add” button.

Step 2 Bing Webmaster Tools Verification

 

3. You will then be taken to the “About my Website” screen. 

  • Add a sitemap if your site has one, if not you can always add it later.
  • Click the “Add” button.

Step 3 Bing Webmaster Tools Verification

4. You have three options to verify site ownership. 

  • You won’t be able to verify the site (see button circled in red below) until one of the three options has been successfully implemented.

Step 4 Bing Webmaster Tools Verification

 

5. Once the selected verification method is completed, come back to Bing Webmaster Tools.

  • Sign in and the “Verify Now” link will be waiting for you on the home page.

Step 5 Bing Webmaster Tools Verification

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?