The Three Ps of UX

There are three types of people in the world; pacifists, predators and protectors. UX people are the protectors. 

Feature Creep, and the Allure of Axure

Axure RP is an amazing tool for creating working prototypes, regardless of whether they’re low or high fidelity. And because it’s so good at writing HTML5 that can be shared remotely it quickly becomes an indispensable tool for all your UX documentation needs. This can include content maps, use cases and wireframes. But, before you make it the primary tool in your UX toolbox, beware of feature creep.

Feature creep is the ongoing addition of features and functionality which can eventually lead to over-complication and diminished efficiency. In the case of Axure, its ability to make all this documentation interactive, and to take static wireframes to the next level is a feature that can be, for some, irresistible. But just because you can, doesn’t necessarily mean you should.

If Axure is the primary tool in your UX workflow, use it judiciously. Getting caught up with all that you can do in Axure can put a heavy burden on deadlines and deliverables. The solution is to have clearly defined boundaries as to the scope of the deliverable in terms of interactivity at each project phase.

One way to accomplish this is to create two sets of “sitemaps”. One for the proposed information architecture, and the other for only the pages that will be framed out in the wires. As the project progresses, the page icons in the IA sitemap (which I prefer to call a “content map”) can easily be remapped to the wireframes, which will evolve into your prototype when the appropriate stage is reached.

Also, working form a library of standardized interface and content elements can be helpful. Resist the temptation to customize everything up front, and you can drag and drop your way to wireframes in no time, with time to left over to ideate for the long haul.

The Waning Desktop

Undoubtedly, the desktop computer as we know it has peaked, and it’s time to move on to a new paradigm.

The Mac Desktop experience is, in my opinion, better than ever. But for some time now, that experience has been part of a more portable device…the notebook computer. The use of notebook components has allowed the transformation of the desktop into a combined CPU-display form factor. And the migration toward notebooks as replacements for those desktops has largely been driven by the business world. 

I’m a Mac user. And for me, the ability of the MacBook to dock with larger displays, and the abilities of the Lightning connector to facilitate that process has made the transition to a more portable desktop computer seamless and practical. 

The next phase of this transition was revealed at the WWDC with the announcement of Yosemite, which will integrate all of Apple’s desktop, portable, tablet and mobile devices into one cohesive experience.

Proof of Concept

Yosemite, scheduled to be released in September, is definitive proof that the mobile space is driving the desktop computer.

A Great Resource for Responsive Testing

This site hosted by StudioPress allows you to enter a site’s URL, and see how it appears on a variety of screen widths and devices.

StudioPress

The Most Googled Medications (July 2013)

1. Alprozolam (Xanax)
2. Amphetamine mixed salts (Adderall)
3. Paracetamol (acetaminophenm) (Tylenol)
4. Tramadol (Ultram)
5. Diphenhydramine (Benadryl)

---

Source: NYTimes Magazine, September 8, 2013

Blogging to the User

One of the things I like about blogging is that it represents an interesting combination of agile and user-centered design. You dive right in and start blogging, and then make small, incremental, iterative changes here and there. Subtle additions and improvements to keep your readers happy and productive.

To Skeu or Not to Skeu, That is the Question

Are we about to experience a paradigm shift away from Skeuomorphic design? If Apple has its way, perhaps. But, is this a positive? Is this good for UX, or not? Is this the death of the icon?

Knowing when and how to use Skeuomorphic design is in itself, both art and science. Imagine if your favorite game no longer had imagery based on reality, but was based on cartoon-like illustrations, and flat ones at that. None of the modeling that we have grown accustomed to in many new adaptations of traditional cartoon characters. Imagine if a button no longer looked like a button.

Affordance? No.

Just as it’s been ingrained in usability analysts to seek affordability in controls, is it to be pulled out from underneath us? Has a simple plus sign become so widely accepted as a button? As the Dalai Lama said, “Learn the rules so you know how to break them properly”. And are we?

As a photographer, both digital and analog, I use a lot of photo apps on my iPhone and iPad. It’s enormously handy to have a reasonably accurate light meter with you where ever you go. And one of my favorite apps is myLightmeter Pro.

myLightmeter Pro, Standard Interface.

There’s a free version of myLightmeter, but I bought the paid version not only for its additional features, but cool dual interface. The Pro version has both the “gas pump” style readout, and this:

myLightmeter Pro, “Classic” Interface.

Neither one of these interfaces seem to resemble any traditional light meter that I’m familiar with. And yet I can easily identify with and use them. Certainly app based light meters don’t need to have this appearance, but for me, it enhances my experience. Remember, usable = cool, and by that standard, these are most cool and most usable.

Light Meter was my previous go-to app. Its interface mimics that of a digital SLR, still a Skeuomorphism, ableit a more modern one. Coolness factor? Low. Usability? Less, due to the low coolness factor; it simply doesn’t appeal to me as much as myLightmeter.

Light Meter by Horace Ho; DSLR-like skeuomorphic interface.

I find it interesting that while 3D is trending in movies, we seem to be moving away from it in UIs. Is this perhaps because the skeumorphic interface clashes with the real? Certainly the photos and videos we compose on our phones won’t be confused with the interface used to generate them. But if all things are to be 3D shortly, shouldn’t our icons and buttons reflect this?

Remember what the Dalia Lama also said…
“Open your arms to change, but don’t let go of your values”

Google Fail

If Google’s plan is world domination, then they’d better get the UX right.

Even though Wordpress is the blogging platform of choice, I just can’t seem to abandon Blogger. It is, in many ways superior to Wordpress, and certainly a great starting point if you’re new to blogging. But, its mobile experience leaves a lot to be desired. My latest frustration is this…

Fail. These characters are perfectly valid when used in labels.

Business TLAs

Here are some business and marketing TLAs…

Pharma TLAs

Here are some TLAs specific to the Pharma Industry…

Phat Phooter

I’m currently working on a microsite project, and it was suggested that we use a fat footer. This term, although sounding a bit derogatory at first, best describes this very popular (hence the alternate spelling) and usable approach to web design.

Bad UX: Login Required

Requiring a user to log in in order to browse is the best way to promote dropoff.

Yet another example of poor UX…

IPad 4 UX

With so much of my UX time devoted to iPad eDetailing these days, it has come time to relinquish the family iPad in favor of my own, dedicated to UX and Photography. 

Case Use The first challenge was to find a case, and once again, the elegance and simplicity of Apple products comes shining through. The “Smart Case” fully encloses the iPad with minimal bulk, and offers three use options, with a secret forth that makes viewing and typing a cinch (once you get used to its “querky” keyboard, misspelling intentional).

UX Apps Next up is to research and install apps which enable me to do field work, and to set up the screens for maximum usability and efficiency. OmniGraffle for iPad seems a no-brainer, but at $49.99 I’m a bit skiddish. TouchDraw packs a lot of features for a mere $8.99.

I was not too thrilled about giving up one of my favorite standards of all time, the beloved 30-pin dock connector, but I must say, the new lightning connector is sweet, and if That’s the price I have to pay for the Retina display, so be it.

I’m pretty thrilled with my new Apple experience, and this was the perfect time to make the addition to my Apple product family, especially with the impending release of “IOS7, Fisher-Price Edition”.

Quad Graphics: Color Expectations Profile

Overview

So here I am, at a workflow meeting, and we begin to talk about, “The Cheat Sheet”. It’s an Excel spreadsheet with client preferences on how to color-correct, retouch, and otherwise process their images. The problem is, no one’s using it, and it’s mission-critical that they do to avoid costly reworking and dissatisfied customers.

The “Cheat Sheet”. An Excel document full of client specs with poor user acceptance.

Having experience with UI design, I immediately see an opportunity, and present it to the group. Here’s how I spin it.

“The reason no one’s using this tool is really a usability issue. We work at a fast pace, and no one has time to read through the information line by line to find just a small portion of it, like how silos are to be prepared or what type of paper stock it should be proofing on. We could format the information, but there’s no guarantee that format will be followed in the future. What we need to do is normalize the data and convert it to a database with a web browser interface that’s quick to view and edit.”

Here I’m thinking, Gestalt principles, drop-down menus to control input, FileMaker Pro database as the back end, a web page dashboard easily accessed from everyone’s workstation as the front. In short, a web application on the corporate intranet.

“Well, then that’s your new job”, the department head responded, and so my career in usability began.

---

The Strategy

• The Goal: To increase usage and reduce access time to critical information.
• Target Users: Veteran Color Retouchers and Digital PreMedia specialists with varying experience with digital media, applications and color management.
• General Tasks: Quickly look up information by publication title such as input profiles, color conversion procedures, output profiles, quadtone curves, color correction preferences, retouching preferences, silo preferences, proofing device and paper stock.
• Technological and Other Constraints: 
• Back-end must run on Apple servers.
• Front-end must be accessible through web browsers, specifically but no limited to Safari
• Linguistics of interface must use a common vocabulary 
• Marketing/branding goals: Must carry the Quad Graphics brand and be easily identified as proprietary information. Interface must look professional in appearance to be taken seriously.
• Critical Success Factors: 
• Must be embraced by all users.
• Must be easy for users to maintain their own accounts.
• Must be easy to make quick usability adjustments.

---

Data Gathering

The spreadsheet itself was instrumental in gathering facts, primary nouns, and vocabulary. It was shared by all users and written by them, so the first task was to analyze it and pull out the relevant information. It was broken down into specs and tasks.

I then polled the users and did a card sort. I had the opportunity to conduct quick, informal interviews to learn what people needed, and what they expected. Recording in the workplace was not really an option, so I did it the old fashioned way...with a pencil and paper.

Finding a common vocabulary was a real challenge. Here we had the opportunity to bring veteran color professionals up to speed with modern terminology, but would have to do so without alienating anyone. Gestalt principals actually helped here, as the grouping and ordering of information went a long way toward increasing cognitive abilities. By grouping things intuitively, the user could put them in context with terminology they were already familiar with.

---

User Profiles

We had several distinct users afoot:

Account Representatives who were familiar with four-color printing but had little or no Photoshop experience, and who were called upon from time to time to assist the production team.

Veteran Color Professionals mostly familiar with working in a CMYK environment and using more traditional techniques such as dot etching. Some Photoshop experience, but mostly with CMYK curves and the clone stamp tool.

Experienced Photoshop Users familiar with retouching in the RGB color space but not so much with color management, advanced color adjustments such as simulating CMYK moves in an RGB space, or use of advanced features such as Actions or Smart Objects.

Advanced Photoshop Users easily able to make the transition from a CMYK workflow to an RGB one, familiarity with the L*a*b* color space, and the ability to employ more advanced productivity features in Photoshop.

	Account Representative	Color Professional	Photoshop User	Photoshop Expert
Age / Gender	62% Female, Age 20-40	85% Male, Age 30-55	65% Male, Age 25-40	50% Female, Age 25-40
Education	Most have degrees	Some higher education	Most have degrees	Technical Education
Language	English, Spanish	English	English	English
Computer / Web Experience	Med	Low	Med to High	High
Domain Expertise	Low to High	High	Med	High
Task Knowledge	Low	Med	High	High
Expectation	Ease of use	Speed of task	Speed of task	Comprehensive Functionality

---

Task Profiles

The main tasks were broken down as follows:

Conversions Which profile to assign when opening untagged files, and which output (CMYK) profile to convert to before saving the file. Initially, all but a handful of accounts were working in CMYK.

Color Intent Generally, the users were required to match the color of the scanned reflective art or (less frequently) transparencies, or make digital images “pleasing”. Since this is highly subjective, color preferences would need to be provided to achieve this pleasing color. Specifically, overall color temperature, skin tones and highlights/shadows needed to be carefully considered.

Cast and Drop Shadow preferences varied widely amongst clients, so this needed to be addressed.

Back-End Processing had two options; whether or not to deliver a low resolution image to the client, and which operation to move the image file to upon completion.

Proofing involved which device to send the image file to in order to have it proof on the correct stock. Covers were handled by a different proofing technology entirely (until later in the development cycle when the same proofing devices where used for both pages and covers.

Task	CSR	Color Sponsor	ColorMac Operator	Color Manager
Login	•	•
Find title (search, browse)	•	•	•	•
View as list	•	•	•	•
View as Detail	•	•	•	•
Edit record	•	•
Save record	•	•
Export data to XML	•	•
Import data from XML	•	•

---

Environmental Profiles

Characteristic	Variable	Design Implication
Location	Indoor	Equipment options
Workspace	Compact	Smaller display
Lighting	Subdued, Dim	Color, Contrast, Fonts
Hardware	Primary Display: Flat-screen LCD 1920 x 1090 px Secondary Display: Flat-screen LCD 1024 x 768 px Apple Mac G4 Tower	Legibility Subdued color palette for minimal influence FileMaker Pro web server must be compatible with Apple Servers Generated HTML must be compatible with Safari
Software	Mac OS X Tiger	Supports FileMaker Pro 6, 7

---

Field Studies

I conducted two types of field studies; Direct one-on-one interviews with actual users, and a group session once we had some paper prototypes in hand. I recruited coworkers with which I felt I had the best rapport, and asked them to fill out questionnaires which I designed to get the information I was looking for. This was a slow process which could take several days while they performed their normal daily duties. From this I was able to learn what the primary nouns were, and compare this list to the information I had already gleaned from the cheat sheet.

I would randomly meet with actual users when they were available to ask them about their motivation, domain knowledge, task flows, problems and opportunities, usage patterns, and other relevant information. This became a part of my daily routine.

I constructed a paper prototype, and held a group session to introduce it and get feedback. A questionnaire was handed out during the session so I could record the result for future study.

---

Information Architecture

Based on a combination of the primary nouns provided from user queries and the data compiled from the cheat sheet, I devised a reverse card sort to learn how I should approach the interface design so I could arrive at a paper prototype. The plan all along was to use Gestalt principles to arrange the data in groups so the user could scan the interface and always know where to look to the the information they needed quickly.

• Color Intent
• Scans
• Reflective
• Transparent
• Digital Intent
• RGB
• CMYK
• Grayscale
• Proofing
• Body stock
• Cover stock
• Special Cases
• Color Preferences
• Overall Color Cast
• Overall Color Characteristics
• Shape
• Saturation
• Luminosity
• Fleshtones
• Highlights and Shadows
• Neutral Tones
• Out-of Gamut Colors
• Mandatory Procedures
• Black and White Preferences
• Type
• Curve
• Comments
• Cast and Drop Shadow Preferences
• Type
• Tint
• Comments

---

The Paper Prototype

I created a quick sketch, scanned it, and presented it to the group to see their initial reaction. It was well-received, so I quickly moved to to building the working prototype.

---

The Working Prototype

One of the great advantages of working with FileMaker Pro as a back-end was the ability to build a robust user interface which was clickable. So, to save time, while I was building the database, I was also able to create a working prototype which I could later use for testing purposes. It didn’t matter that the users weren’t going to working directly with the FileMaker Pro application, because we could easily model the HTML front end after it.

Color Expectation Profile: Working Prototype

Users encountered no problems with the interface. The major problems turned out to be the vocabulary involved in the drop-down menu choices; our users were not up to speed with color management terminology. So, we made some minor adjustments, and rolled out a training program. We flew people in from Wisconsin to talk about color theory and color management to the group. Later, we also developed an addition to an existing application called “Work Queue” which assisted users in assigning the correct input and output profiles to images they were working on.

While this was going on, I took what I had learned during UT and applied it to a more concrete design. We learned that users did not mind the element of color, so we color-coded the containers. We changed the primary noun “mandatories” to “best practices” to gain user acceptance, and permitted two-line entries. Feedback from CSRs prompted us to include account information in the header.

---

Version One

Color Expectations Profile: Version 1.0

---

Version Two

Real world use gave way to more iterative development, and so version two was born.

Color Expectations Profile: Version 2.0

---

Version 3

Color Expectations Profile: Version 3.0

As display size increased, we were able expand the interface to include more requested information. The timing of this was most advantageous, as a program had been started to recruit Customer Service Representatives and Production Coordinators for production.

After this initiative was put into action, user testing now revealed a new set of requirements: Training. The needs of the inexperienced became even more significant, and so many of the specifications were rewritten “tutorial style” to make it easier for them to follow. We even included a “tips and tricks” section at the user’s request.

Should Designers Code?

It depends on your definition of code. If your definition is “production code”, then the answer is an emphatic NO. If your definition is a more simple code used in developing advanced prototypes for use in usability testing, then the answer is “definitely maybe”.

As a usability analyst, all too often I see the shortcomings of attempting to produce final code when the time would be better spent engaging in an iterative design process through research and testing. Designers who write code up front become attached to it and are less inclined to make the changes necessary to ensure usability. The “get it right the first time” mindset of the “coding” designer simply doesn’t lend itself to an optimum user experience.

On the other hand, designers who dabble in code and can produce working prototypes develop a better understanding of the light of the developer. This allows them to concentrate on navigation, information architecture and task flows to give the software engineers what they need to avoid the rewrites that increase downstream costs and diminish the ROI.

Do architects build houses? Do automobile designers hunker down on the assembly line?
I think not.

Principles Behind the Agile Manifesto

Our highest priority is to satisfy the customer through early and continuous delivery of valuable software.

Welcome changing requirements, even late in development. Agile processes harness change for the customer's competitive advantage.

Deliver working software frequently, from a couple of weeks to a couple of months, with a preference to the shorter timescale.

Business people and developers must work together daily throughout the project.

Build projects around motivated individuals. Give them the environment and support they need, and trust them to get the job done.

The most efficient and effective method of
conveying information to and within a development team is face-to-face conversation.

Working software is the primary measure of progress.

Agile processes promote sustainable development. The sponsors, developers, and users should be able to maintain a constant pace indefinitely.

Continuous attention to technical excellence and good design enhances agility.

Simplicity--the art of maximizing the amount of work not done--is essential.

The best architectures, requirements, and designs emerge from self-organizing teams.

At regular intervals, the team reflects on how to become more effective, then tunes and adjusts its behavior accordingly.

“Cool = Usable”

— Human Factors International

The TLAs of UXD

For those of you who may not be familiar with the TLA “TLA”, it stands for Three-Letter Abbreviation. But it also conveniently stands for Three-Letter Acronym Two-Letter Abbreviation or even Two-Letter Acronym. Like many industries, UXD has many TLAs, so here’s a quick guide to what they are, and what they mean.

UXD (also known simply as UX) stands for User-Experience Design, and it’s at the top of the TLA hierarchy. Within it, there are these areas of concentration:

• IxD (Interaction Design)
• UA (Usability Analysis)
• UCA (User-Centered Analysis)
• UCD (User-Centric Design)
• UI (User-Interface Design)
• UT (Usability Testing)
• UX, UXD, UED (User Experience Design)

Other TLAs include:

• CD (Contextual Design)
• CMS (Content Management System)
• GUI (Graphical User Interface)
• HCI (Human-Computer Interaction)
• IA (Information Architecture)
• ID (Information Design)
• JAD (Joint Application Development)
• KPI (Key Performance Indicator)
• PD (Participatory Design)
• ROI (Return on Investment)
• RUT (Remote Usability Testing)
• RWD (Responsive Web Design)
• SEO (Search Engine Optimization)
• SoC (Separation of Concerns)
• UAT (User Acceptance Testing)
• UI (User Interface)
• UID (User Interface Designer)

Some TLAs may be numeronyms (number-based words) or alphanumeric combinations. Perhaps we should call these TCAs or Three Character Abbreviations. But then, we might get TCA with its sixteen or so other meanings.

• 3GL (Third-Generation Language
• 4GL (Fourth-Generation Language
• L10n (Localization)
• i18n (Internationalization)

Numeronyms are created by combining the first and last letters of the word with the number of letters in between. In the example about, the “L” in L10n is capitalized so as not to be confused with the number one, which would appear almost identical to a lowercase L.

“Know thy users…for they are not you”

—Human Factors International