Spark

Archives

Brian Flanagan

Posts by this author: RSS

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.

Less PowerPoints, More Prototypes

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.Lean UX Model
The Lean UX process involves 3 core steps:

  • Think: In the think stage, designers, developers and business owners collaborate on a particular problem and sketch out ideas for the solution. The goal is to get the core components of the solution visualized quickly so the development team can provide insights on the direction of the design, including feasibility. The initial investment in sketching is so minimal that there is no significant cost to completely rethinking the direction.
  • Make: Once a general direction is agreed upon, the team elaborates upon the solution through interactive prototypes. The interactive prototypes define the layout, functionality, relative importance or priority of information of the user interface and allow the team to experience the solution faster.
  • Test: Once the prototype is developed, it can be used to test the effectiveness of the design. By conduction usability testing sessions with representative users, the team can collect valuable feedback that will improve or enhance the solution. Based on the feedback received in the usability testing, the team makes revisions to the design concepts. And the cycle continues until all features and functionality are designed an incorporated into the working model.

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.

 

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.

Designing From A Fresh Perspective

As a designer, its easy to fall into patterns that conform to established models. But to truly innovate, you must bring a fresh perspective to every design challenge. I was recently reminded of the value of a fresh perspective, when my 7 year old daughter took on the challenge of making a computer for her American Girl Doll. Because we all know that any self-respecting doll, has gotta be connected.

IMG_3311

American Girl Doll Using Her Laptop

However, this was not an ordinary computer. It was a Mac, which was already enough to make me proud. But it was also customized to her doll’s very specific needs. First of all, it was purple, which is the doll’s favorite color, it was also sized perfectly so that it could fit into her purse and it even had a rear facing camera to take pictures of the other dolls while she was on “Facebook.” But what amazed me the most was the keyboard layout. Yes it included most of the typical numbers and letters that you’d find on a keyboard. However this keyboard was also personalized. It had special keys for her email address, zip code, and Facebook username “in case she got tired of typing.” This really made me realize how much I hate typing in my email address all the time, especially on mobile devices. Wouldn’t it be great if I could have a single key that take care of that for me? Yes, I know most web browsers retain email inputs to support an autofill function, however mobile browsers typically don’t support that capability as well. And in mobile interactions, that capability would have most value.

IMG_3313

Personalized Keyboard

In designing her computer, my daughter never considered the limitations that come with a standardized physical keyboard. In her mind, a computer should be customized to meet the needs of the user. And in today’s world of virtual keyboards and personalization features, there is the opportunity to make that reality. It might even change the way we think about our personal devices. So in your next project, try injecting a fresh perspective and you may be surprised with the results.

 

 

 

 

Are Devices Personal?

Every day I get “targeted” emails from retailers that are designed to appeal to my personal profile and preferences. Much of the content is driven by search history, browsing patterns, shopping cart contents and the assembled profile that the retailer has created for me. Which is great in theory. I want more relevant experiences that are tailored to my unique needs and interests. However, the reality is that my profile is actually an amalgamation of my entire family. You see, when I get home at the end of the day, my phone, my laptop, and my tablet become public property. My wife and my kids each take their turn and have their own experiences online. Experiences that include, disney princesses, monster trucks, cake decorating and yoga. So now when I get an email from a retailer, it is typically reflecting a diverse set of browsing experiences. For instance, the other day I got an email from Amazon that was promoting a set of jungle gym related products (a rock climbing wall, gymnastic rings, a play tunnel, etc..). From that, I could tell that my wife was thinking about remodeling our play room. To which I replied, “you are not turning our playroom into jungle gym.” Helpful for me, but perhaps not the intended goal of the email campaign.

Targeted Email Campaign

Targeted Email Campaign

So while personalization is becoming more engrained into a variety of web experiences, some of the methods need to be re-evaluated. It is not safe to assume that devices are personal. They can easily be shared and frequently represent a group of users. Therefore, the challenge is for retailers to focus on a personalization model that supports individual interactions vs. broader profiles. This can be achieved by looking at the context of the interaction to understand the intent, mindset and ultimately the needs of the individual user. Only then can personalization become truly personal.

The Dynamic Customer

At the recent Adobe Summit in Salt Lake City, one of the most interesting presentations I saw was delivered by John Bollen of MGM resorts. As the Chief Digital Officer for MGM, John is responsible for supporting the guest experience through technology. During his presentation, John brought up an interesting challenge. At MGM, they realize that their guests are never the same guest twice. What that means, is that a single customer might visit an MGM resort multiple times under different circumstances. For example, they may visit on an outing with their friends, then again on a business trip with colleagues, and later on a leisure trip with their family. The key to delivering a great experience for each visit, is understanding which mode a guest is in, and providing the appropriate interactions. 

The challenge John described is what I refer to as The Dynamic Customer. While you may have a good understanding of your customer’s needs, behavior and motivation, you can’t expect them to engage with you in the same way every time. Customers are people. And people are dynamic. They are emotional, sometimes irrational and largely influenced by their environment. To provide the right experience at the right time, you need to take into consideration the customer mindset and provide interactions that are appropriate for the situation.

Take for instance, my experience with our local drugstore. I always seem to find myself running to the store with my kids to pick-up a gallon milk, a prescription, or whatever last minute item I need. However, when I have a sick child with me, the last thing I want to do is get them unbuckled, drag them into the store and then try to get them back into the car. On one such visit earlier this year, I was going to the drugstore to buy some Motrin for my son, who was with me in the car. I thought, wouldn’t it be great if I could just get the medicine that I needed through the pharmacy drive-thru window? Surely that makes perfect sense. So I tried to do exactly that. Unfortunately, my store did not offer any OTC medicine through the pharmacy window. Needless to say, I was not a happy customer that day. The drugstore did not consider my situation and provide an appropriate experience. On the other hand, all of their other customers did get to experience a sick, screaming child being carried through their store…

In this instance, it seems that my situation was not unique. The drugstore has recently added some of the most common over-the-counter medicines to drive-thru pharmacy window, including children’s Motrin. Now they’re thinking about The Dynamic Customer, and so should you.

 

Cinemagraphs: Add Life To Your Imagery

Stock imagery doesn’t need to be boring. When working within budget constraints, there are still ways to make your design pop. One way to do that is through the use of cinemagraphic photos. A cinemagraph combines still photography with video elements to create something that is more that a photo, but not quite video.

cinemagraph

Relaxing By The Sea

The above image is an animated GIF file. It was created by extracting individual frames from a high-definition stock video and then selecting a single frame to use as an image mask. Only a portion of the photograph is moving in an infinite loop while everything else is frozen in time. The effect is both subtle and impactful, and certain to grab the attention of your audience.

(more…)

New Adobe Creative Suite Announced

Today Adobe announced Creative Suite 5.5. This point upgrade is a significant change in the Creative Suite release cycle. Because technology is evolving so rapidly, Adobe has moved to point releases in order to get new features and functionality to market more quickly. Included in this release are a host of new features across the tooling platform that aim to speed development and enable cross-platform experiences.

Digital Publications

  • InDesign’s New Folio Producer tools and integration with the Adobe Digital Publishing Suite enables designers to produce immersive digital reading experiences for desktops, tablets and e-reading devices.

HTML5 and CSS3

  • Enhancements to Dreamweaver’s workflow and coding tools enable designers to more efficiently produce web sites and applications based on HTML5 and CSS3 specifications. New tooling features include: code hinting and code completion, an updated live view component, in-context prompts and updates to the CSS panel. In addition, Adobe Device Central CS5.5 emulates HTML 5 content on wide variety of supported devices, including Webkit, video, canvas and SVG.

Mobile Application Development

  • Flash Builder 4.5 allows developers to build standalone applications targeted at multiple platforms. The mobile-ready components included in the Flex framework, are optimized for performance and multi-touch input.

Rich Internet Applications

  • The Flex SDK 4.5 introduces a number of new Spark components, including Datagrid, Form and Image controls for web and desktop applications. The Spark components separate visuals from component logic, allowing for easier skinning and configuration.

Graphics and Animation

  • Adobe Repoussé in Photoshop Extended is a powerful new feature that allows designers to create 3D content based on the ancient Repoussé metalworking technique for embossing artwork on the surface of metals such as gold, silver, copper, tin and bronze.
  • Illustrator’s vector-based Bristle Brush produces lifelike brush strokes that can be edited as easily as if it had been created with the Pen or Pencil tool.
  • Photoshop’s new real-world brushes and paints help create more realistic painting effects with new ways to blend colors and bristle qualities. The new tools open the door for outstanding expressive effects, from enhancing photographic images in unusual ways to painting directly on blank canvas.

These features and more make CS5.5 an upgrade worth considering.