UI Design

5 Crucial Principles for Great Mobile Design

5 Crucial Principles for Great Mobile App Design

The exponential and continual explosion of apps for mobile devices is certainly keeping us designers and developers on our toes; it’s tough to keep up. The good news, however, is that while technology advances and devices evolve at breakneck pace, the principles for great mobile design remain the same. Here are the five you need to know and apply.

  1. Design the parts to be consistent with the whole. Designers are often expected to break with convention. Apple encourages all of us to “think different.” But you need to remember that your app is a part of a larger family — everything else on the user’s device. Any OS introduces conventions to the user, consistent interaction patterns that allow them to get a quick handle on how things work, a model that shouldn’t be broken. When Sheila’s favorite app suddenly introduces a way of deleting content that runs counter to the way she deletes something in all her other apps, she gets frustrated. And that is often enough for her to start seeking alternatives or delete the app altogether.
  2. Make opportunities to interact obvious and visible. A user can’t interact with something on the screen if they can’t tell the element is interactive. The ubiquitous “hamburger” menu, for example, is quickly becoming a design convention — but the jury is still very much out on whether the majority of users know
more  

  Tips & Advice

Pick My Brain #011: Do I have to use blue for hyperlinks in my UI design?

Blue for hyperlinks in UI design

Today’s question comes from Krista, one of the 11,000+ students taking my User Experience Design Fundamentals course on Udemy.

Q: Is it important to use blue for hyperlinks? Blue clashes with our color palette. Do I need a different color for links moused over? selected? If so, what is a rule of thumb for that?

A: Great question Krista. The short answer is no, blue is not required at all. What is important, however, is that:

  1. The hyperlinks stand out visually from the other text, and
  2. On laptops or desktops, there is a state change that indicates interactivity.

For phones and tablets, there’s no hover state, so #1 above is most important. In that scenario, you can change color: for example, make hyperlinks orange if the text is black or dark grey (use a significantly different color). You can also make hyperlinks bold, a different font size, or a different font altogether. And, if it’s not visually distracting, you can underline them. All of these approaches send a clear visual signal that this piece of text is a link; that it does something.

For #2, you’d do this in addition to making the link visually distinct. When a link changes appearance on hover, for example, you’re sending a clear signal to the user that reinforces their suspicion that this does something. An appearing underline, a change to bold, or a significant change in color all reinforce the message that this is a link.

And in my opinion, you

more  

  Tips & Advice

Pick My Brain #010: Navigation Design vs. Interaction Design

Blue for hyperlinks in UI design

Today’s question comes from Ganesh Kumar, one of 11,000+ students taking my User Experience Design Fundamentals course on Udemy.

Q: If I am not wrong, interaction design is where we make decisions like what happens when user clicks on a button, e.g. should it launch a new window or take the user to another page etc. Isn’t that the navigation as well? I am very confused on these two elements, could you please clarify?

A: Thanks for the great question Ganesh, and it’s one that gets asked more often than you think. If you haven’t done so yet, read through the similar question here on interaction design vs. interface design, as it’s related and may help. Here’s the short answer to the difference between Navigation Design and Interaction Design:

When I talk about Navigation Design, I am not talking about interaction, or even the interface. Navigation design is the conceptual model of how information is structured and organized, and how the user will get to all of it. Categories, subcategories and links between them.

Navigation design can be done on a piece of paper or with a text-only outline in Microsoft Word — because the only things you’re trying to figure out are:

  1. How much content (or workflow steps) do we have,
  2. How should it all be organized, and
  3. How is it all related?

So in terms of your question, think of it like this:

How a navigation menu behaves when someone
interacts with it is Interaction Design.

more  

  Tips & Advice

4 Tips for Adding Lean UX to an Agile Development Process

As organizations of all shapes and sizes come to grips with the fact that UX is critical to project and product success, a common question resurfaces time and again:

“How do we add Lean UX practices to our current process?”

When I hear this question, I know that what’s really being expressed is concern, and in some cases, fear. What they really want to know is how can we do this without screwing up the way we do things now? In some cases, that’s a legitimate fear. Companies whose agile development processes are well-managed and well-executed are understandably reluctant to add anything new to the mix. Any change brings difficulty, and the simple fact is that there is no way to add Lean UX to company culture or process without experiencing some bumps in the road.

That said, there is most definitely a way to minimize the disruption and get past those speed bumps quickly. Adding Lean UX practices into an agile process successfully can be a complex process, and the specifics change depending on the organization, the project and the deadline. However, in my experience the are are 4 truths, 4 pieces of advice that apply to any situation.

1) Hire experienced UX analysts and designers; you need at least one experienced, senior UX member capable of sharing the driving. 

Ideally, they need to be part of your team as early in the process as possible. Meaning when you’re scoping the project, they’re at the table. They should be sitting side-by-side

more  

  Tips & Advice

Pick My Brain #009: Interaction Design vs. Interface Design

Blue for hyperlinks in UI design

Today’s question comes from S. Mitra, one of the 10,000+ students taking my User Experience Design Fundamentals course on Udemy.

Q: In principle, I understand why Interaction and Interface design may be worded differently, but am having a bit of a difficulty getting head around the difference between them.

For example: when I have an entire wireframe complete with planned functionality waiting for the visual design to sit on top of it, is that interface or interaction?

A: This is an excellent (and very common) question. Here’s my quick take on the difference between the two:

Interaction design is concerned about how the person interacts with what they see on the screen – whether they know what to tap, swipe or click, and whether what happens meets their expectation and moves them closer to their goals. Interaction Design is all about figuring out how people need to use what you’re designing, and what cues (cause & effect) you can give them so they know how to take action. The bulk of interaction design efforts have nothing to do with final colors, fonts, styling, etc. The focus is on the flow of tasks, sequences of events and making sure there are appropriate visual cues that direct and guide the user in those activities.

Interface Design is the visual styling on the screen. What things look like, how they’re arranged and how they relate to each other visually in terms of hierarchy. Font choices, color schemes, graphic elements, button and menu styling all fall under the

more  

  Tips & Advice

3 critical secrets for better UX requirements

3 Critical Factors for UX Requirements

All too often, UX requirements come from a scenario where the discussion in the room is focused on the product itself – data, processes, controls, functionality. It’s usually a “what will it do and how will we build that” discussion. Most IT folks I’ve worked with refer to the process as “gathering requirements.” There are two problems with this concept.

First, and I’m stealing this from Kim Goodwin, because she’s 100% right — is that requirements can’t be “gathered.” They’re not growing on a tree in the office just waiting for us to come by and pick them. Requirements do not exist until a collaborative exchange happens between all players in the project — the client’s teams, the IT department, UX and UI designers, Marketing, Sales, et. al. So if anything, requirements are really negotiated.

Uncovering and defining UX requirements for features, functionality and content is a balancing act between you, the client, internal forces and external forces. It’s a negotiation across all of those things. So it’s perfectly normal if in the first one hour session you don’t know everything there is to know about what your requirements are. It’s a multi-step process that’s more a marathon than a sprint, and you have to go through it.

Second, you are making a critical mistake if your discussions are focused solely on the mechanical functions and processes of the product. Features and functions are only a small part of the requirements picture, in terms of designing and building something that gets used and delvers measurable value (read: ROI). Making

more  

  Tips & Advice

UXers: If you could sit down with me for coffee or a beer…

…what’s your #1 most burning question you’d want to ask me?

Click here and let me know.

more  

  Customer Experience

9 Ways to Improve eCommerce Customer Experience

ecommerce-customer-experience

Survey every article you can find about poor, underwhelming or non-existent customer service and the overwhelming majority will be about ecommerce customer experience. Despite all our advances and seeming maturity in User Experience design and Customer Experience strategy, ecommerce experiences are still, by and large, bad. In some cases, beyond bad.

The thing is, it isn’t really that hard to make them better. To wit, here are 9 ways to improve ecommerce customer experience that are (a) painfully obvious and (b) frequently overlooked.

  1. Clear Layout & Navigation. Is this a store? Is it obvious that I can buy things here, and do I have a sense of the breadth & depth of what’s offered?
  2. Proof of Value. Social proof & testimonials. Who else has bought from you or used your products, and what do they think? If I don’t see reviews, you’re immediately suspect.
  3. Make it About Me. I don’t care that you’re the leading blah blah blah blah blah and your products are blah blah blah. There is only one thing I want to hear from you, in answer to a very simple question: What’s in it for ME?
  4. Give to Get. If you want my email address, give me something of value. Coupons, rewards, freebies, etc. Show me that you care about making it worth my while.
  5. Keep Your Promises. If you say I’ll get something valuable for giving up some privacy, you had better send me something valuable. If you say you’re going to
more  

  Tips & Advice

Pick My Brain #008: Recommended Resources for Usability Testing?

Blue for hyperlinks in UI design

Today’s question comes from Raguram Venkatesan, one of the 9,215 students taking my User Experience Design Fundamentals course on Udemy.

Q: Hi Joe, first, I just wanted to drop a note that the ebook is fantastic. I am interested in knowing if you have any resources for usability testing. We have recently completed an internal product release at our company and I am interested in getting some real feedback on the usability front. Any advice/resources would be greatly appreciated!

A: Hi Ragu! Thank you for the kind words on the ebook — I’m thrilled to hear you’re finding it valuable and I really appreciate your saying so.

With regard to usability testing, there are several ways to do it — and what I want to stress up front is that this does not have to be a formal process! Regardless of the method you choose, the 3 questions you need to ask and answer up front (which will help you determine the method best for your situation) are:

  1. What will we test?
  2. Where will we test?
  3. Who will we test?

The answers determine how detailed your usability testing needs to be.

What: if you have a lot of moving parts (screens, functions, workflows) that need to be tested, capturing and measuring results may become difficult if you’re doing it guerrilla-style.

Where: If your users are spread out geographically and it’s difficult to get everyone in a room at the

more  

  UI Design

Feedback: 5 Principles of Interaction Design To Supercharge Your UI (5 of 5)

In last week’s post, we discussed predictability, the fourth core principle of interaction design. In this final installment of our five-part series, I’d like to share another critical – and often overlooked – component of great interaction design and positive user experience: feedback.

Just like form matters in industrial design, feedback is absolutely essential to interaction design. And I’m talking about much more than simply supporting individual moments, actions and interactions. Feedback serves a larger purpose in any system as a whole, in that it tells people how they can, and should, interact with what’s on the screen.

Principle 5: Good Interaction Design Provides Feedback.

Feedback communicates the results of any interaction, making it visible and understandable. It’s job is to give the user a signal that they (or the product) have succeeded or failed at performing a task.

On desktops or laptops, when you hover over navigation items, you expect them to change color or load a submenu. That’s feedback, telling you that the item is clickable. Progress bars and animations are also common feedback mechanisms, used to inform people that the system is doing something. And the simple act of using the correct visual form for controls (e.g. buttons that look like buttons, underlined text hyperlinks) provides immediate visual feedback.

Essentially, feedback answers questions across four categories:

  1. Location: Where am I?
  2. Current Status: What’s happening – and is it still happening?
  3. Future Status: What will happen next?
  4. Outcomes & Results: What just happened?

Feedback tells us whether or

more