Hannah Atkin – UX Designer

Blog Archives

June 1, 2015 - Comments Off on Persistent Navigation

Persistent Navigation

Word: Persistent Navigation

Definition: Navigation that is present on every page of a website or application, in the same location and format.

Thoughts: The consistency provided by persistent navigation is important for user way-finding and orientation. This navigation should not be confused with "sticky" navigation, that is, one that remains stuck to the top of the page while the user scrolls. Persistent navigation is all about maintaining a dependable and known element from page to page that gives the user the comfort to adventure and explore without the worry of getting lost.

Question: What is the role of persistent navigation in a world where long single webpages seems to be all the rage?

May 23, 2015 - Comments Off on Heuristic Evaluation

Heuristic Evaluation

Word: Heuristic Evaluation

Definition: A method used to inspect and evaluate the usability of software in order to understand product effectiveness, identify interface design problems, and explore interactions and patterns.

Thoughts: Heuristics is typically conducted during the research phase of the user experience process. During this evaluation, a UX designer will examine all aspects of the product's UI while taking considerable note of important user flows. These do not always have to be formal and can provide a great overview of current product best practices and flaws.

Now, like many UX methodologies, the way in which these evaluations are conducted can differ from one practitioner to the next. Some researchers (myself included) prefer to keep heuristics focused on single products at a time with very detailed analysis. Others like an overview approach where they evaluate many products and focuses on a few specific areas to investigate in depth that can be compared and contrasted.

Any way you slice it, this is a great tool to not only understand the product you are working to improve but to also provide helpful insights into competing products as well.

Question: What is your preferred heuristic practice? Why?

May 17, 2015 - Comments Off on Graphical User Interface

Graphical User Interface

Word: Graphical User Interface (GUI)

Definition: GUIs refer to the interface between the user and the computer system that allows users to interact with an electronic device through graphical icons and visual indicators. Graphical user interfaces allow users to make choices through clicking buttons and graphics. It is sometimes referred to colloquially as a "gooey".

Reference: GUIs are best known through their early implementation at Apple and Microsoft in which they replaced the arcane and difficult to use textual interfaces of early computing. The graphical user interface became the standard over time because it made computing much more intuitive, easier to learn, and extremely accessible.

Thoughts: The work of the UX designer ultimately effects the resulting product's GUI. After computing made the shift to graphical user interfaces our field emerged from the trenches and it's up to us to make this layer between the user and the computer seamless. UX design is the Emerald City; Pay no attention to the man behind the curtain.

May 13, 2015 - Comments Off on Gutenberg diagram

Gutenberg diagram

Word: Gutenberg diagram

Definition: The path a human eye typically takes (in Western cultures) as it skims a page, beginning from the top left and finishing in the bottom right. This focal pattern tends to pay less attention to the other corners of the page, particularly the bottom left corner. This pattern is sometimes referred to as a "Z-pattern".

Thoughts: By understanding the Gutenberg diagram you can design better user experiences through effective page layouts. The z-pattern path articulated here is best utilized for eye movement over heavy text, evenly distributed and homogeneous information, and pages with a large amount of white space.

It is important to understand how the human eye tracks information over various layouts in order to purposefully direct the user towards specified content.

Question: When would you consider the influences of the Gutenberg diagram "z-pattern" instead of thinking about an "f-pattern"?

May 3, 2015 - Comments Off on Inline Validation

Inline Validation

Word: Inline validation

Definition: The inspection and validation of entered data, typically within a form field, before the user hits the call-to-action button.

Thoughts: When forms are validated in real-time, it allows users to complete them more quickly, with less effort, and with fewer errors. The combination of these three things results in greater overall user satisfaction.

We've all been there! That time when you fill out a long form only to his "submit" and realize you committed an error. But now you are back at the top of the page and must become Indiana Jones to find out where the egregious error is lurking. By the time you eventually find it and resubmit you have most likely committed another error. This time perhaps, the form removed your credit card information after the initial submit and you did not realize this when you went for the second go-around. An aggravated email to the help desk ensues.

Now you think to yourself, if only this form had inline validation and I knew exactly when and where I committed that error in the first place!

Note: I may be overly hostile about this at the current moment because of some personal trouble on the Delta Airlines website as of late... just saying.

Question: Why would a designer choose not to use inline validation within a form web?

April 23, 2015 - Comments Off on Hook Model

Hook Model

Word: Hook Model

Definition: The cycle a successful product follows in order to reach the goal of unprompted user engagement, where in users return to the product consistently and often.

Reference: The Hook Model comes from Nir Eyal's book Hooked: How to Build Habit-Forming Products.

Thoughts: In Eyal's book, he describes the Hook Model process as a cycle, consisting of a trigger (external and/or internal), an action, a variable reward, and then an investment. Rinse and repeat.

Let's break down each step a bit for a better understanding: The trigger is the actuator of the behavior, like an alert or notification. The action comes next, which is essentially, the behavior a user performs in anticipation of a reward. The next step is the variable reward, which is the Hook Model's way of creating user craving by initiating intrigue. Finally, investment is when the user takes the step to input some work into the product or service. By investing time and energy, the odds increase dramatically that a user will pass through the Hook cycle again.

The Hook Model is an important tool to not only understand as a designer, but to build habit-forming products as well.

April 19, 2015 - Comments Off on Query Effect

Query Effect

Word: Query Effect

Definition: The notion that people can and will make up an opinion about anything, and will do so if asked, regardless of how much thought they've given the answer.

Reference: I first came upon this term in a discussion about user interviews by Nielsen Norman Group. NNG warns UX practitioners to beware of this effect during interviews because it may result in disingenuous information regardless of user intent.

NNG writes:

"It's dangerous to make big design changes because "users didn't like this" or "users asked for that." If you ask leading questions or press respondents for answers, they might make up opinions that don't reflect their real preferences in the slightest."

Thoughts: User interviews provide extremely rich information but it is important to ask about a user's experiences instead of seeking opinions. Make sure to tread cautiously here. As Henry Ford famously said, "If I had asked people what they wanted, they would have said faster horses." Keep that in mind!

April 18, 2015 - Comments Off on Moderated Usability Testing

Moderated Usability Testing

Word: Moderated usability testing

Definition: A moderator asks questions, instructs and directs a participant through a set of tasks while ensuring that the respondent is guided in such a manner that the goals of the study are accomplished.

Thought: In a moderated usability test the moderator has specific tasks for the participant to complete and she will track these questions herself alongside the participant. The plus sides of this method is that it can can be more engaging than unmoderated testing and it leaves room for the moderator to ask followup questions and observe subtle body language clues. It is also a preferable method if the design test is complex in nature or the prototype is rough or in early stages. This way the moderator can provide advanced guidance and instruction.

In my opinion the best resource to get you started on moderated usability testing, bar none, is Steve Krug's book "Rocket Surgery Made Easy: The Do-It-Yourself Guide to Finding and Fixing Usability Problems." If you have not read this book then stop reading this post right now and go do it! Seriously... do it!

On the flip side, moderated usability testing requires time and coordination. These types of tests also prove more difficult to recruit participants. It is important to remember that data could be effected by the mere presence of a moderator as well.

Question: In what types of situations have you found moderated usability testing to most effective?

April 14, 2015 - Comments Off on Pogo Sticking

Pogo Sticking

Word: Pogo Sticking

Definition: A user navigates to a page deeper in a site's hierarchy, only to immediately navigate back to the page in which she came from -- typically happening multiple times in a row.

Thoughts: Pogo sticking tends to occur because of usability problems like misleading links or omitted information. This increased interaction, providing no value to the user, can be extremely costly to a site and can result in decreased engagement over time. This is different from a "bounce rate" because it happens within the site itself. This behavior pattern likely demonstrates that users are having difficulty finding the content they are looking for.

Question: Can you think of a time that it may be useful to have users bounce back and forth from page to page or should such patterns simply be avoided?

April 7, 2015 - Comments Off on Change Blindness

Change Blindness

Word: Change Blindness

Definition: A perceptual phenomenon in which an observer does not notice the introduction of visual changes to an existing image.

Reference: Think about the games you played as a kid that flashed the same image twice but the second time something was different and you had to figure out what that was. This is surprisingly difficult! It is difficult because there is an interruption in our visual perception and because of the speed in which this happens, our eyes have a difficult time fixating on those changes and interpreting them.

Thoughts: Now think about a time you submitted a form only to see an error message. Then you have to identify which form field the error occurred in. Why is it so hard to find the form field with the small red "x" next to it? Change blindness, that's why! The subtle change between the form pages is not enough to easily identify the problem and therefore we become a frustrated user as we search for the erred field. This is just one of many examples of how change blindness can effect user experience. It is important to think about this while designing subtle interactions.

« Previous Page