Spark

Archives

Archive for the ‘Design’ Category

My Thoughts on the First Enterprise UX Conference

I recently attended the first annual Enterprise UX conference. UX professionals of varied backgrounds and areas of specialization, developers, designers, business analysts, content managers, project managers, IT and marketing managers, program managers and more, all gathered to learn how to plan and manage large application development projects. I enjoyed two days of speakers, a full day interactive workshop and a great time of discussion and sharing with colleagues in the enterprise UX space.

The conference presentations were good, especially Kelly Goto’s “Emotion Economy: Ethnography as Corporate Strategy.” She talked about “humanizing technology”, and the importance of balancing data and emotion to inform strategy and design, encouraging us as practitioners to embrace the move from “I think” to “I know”.

Because the area of enterprise UX is relatively new, and this was the first year of the conference, there weren’t we didn’t have many examples shared of successful enterprise projects. Most of the examples shared were consumer projects and only a few case studies were presented that involved enterprise UX. The rest were consumer examples that we were encouraged to consider and adapt to our environments. That was a slight disappointment, because in talking to other attendees, we were really eager to learn vetted methods and processes.

For the first conference though, we got good insights. Most we knew and understood, but it was good to hear others share their experiences, from the smooth to the painful, both successes and failures. Here are my key takeaways:

1. We’re all learning. Many of us left very excited to try new methods as well as perfect the processes we have been working on to find an effective way to manage the UX side our enterprise projects.
2. Creating a shared understanding is key. Enterprise projects can be executed more smoothly when the entire team, from stakeholders to developers, are meaningfully engaged and consistently informed, providing input and insight or clarifying goals and needs at each stage of the project from discovery to development.
3. Design and development team collaboration during a project can save time and build confidence. Waiting to engage key players can minimize a project’s success. Once the work starts, researchers, designers and developers should work together when/if possible. When a designer receives a report from a researcher or a developer receives a “blind” handoff from a designer and they haven’t been involved in the project prior, it takes time to ramp them up and context may be lost, results or designs may be misinterpreted or reworked because of lack of understanding.
4. Failure is expected but keep trying. Presenters and attendees shared stories of failed projects and the not-so-great moments of their enterprise projects. It was helpful to have presenters analyze failures and show how they could have adjusted and improved for a more favorable outcome.

Enterprise UX is emerging. No one has mastered the process. But with conferences like Enterprise UX 2015, we can come together, share information and learn and grow together. That’s exciting.

Posted in Design, Musings, UX

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 »

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 »

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.

What happens when you push the broccoli button?

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

IMG_4891

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

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

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

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

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

Interesting Insights from HOW Design Conference 2015

Chicago

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS Frameworks – Does Your Client Need One?

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

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

Responsiveness

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

Uniform Styling & Branding

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

JavaScript Components

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

Accessibility

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

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

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

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

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

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

Lessons Learned from an Accessibility Summit

AccessU Summit

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

“Developer” Sessions…

Web Accessibility Essentials Using WAI-ARIA and HTML5

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

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

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

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

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

Designing for accessibility does no one any favors

Book

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

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