15

Shouldn't a user interface be as consistent as possible?

I believe when a user uses an interface, he experiences certain behavior from the interface, and tries to couple those experiences to the rest of the interface as well.

As an example (and the reason why I posted this question) take the accept answer icons on Programmers.SE.

not accepted image

When looking at these icons, I wonder what the checkmark means. I notice the up and downvote icons are either filled in or not. The filled in icon is filled in since I upvoted. I can't couple this behavior to the checkmark, since it doesn't have an outline. What is the current state of the checkmark?

accepted image

Here I accepted an answer, and notice the checkmark 'lights up'. When comparing to an answer which I didn't accept, I can clearly see the difference that I accepted this answer, and not the other. There is a problem however, when I want to see whether I accepted an answer, and it is the only one there.

So, I believe it would be a big improvement for the accept answer icon to also be outlined. Of course I posted this on Programmers.SE meta as well.

Obviously I agree with the highest upvoted answer, but I was hoping more on a 'scientific' UX answer, perhaps some terminology, or influential articles discussing this topic.

So to rephrase the question: Shouldn't a user interface be as consistent as possible?

Improve this question
3
  • I belief 'consistency' to be an appropriate tag for this question.
    – Steven Jeuris
    Apr 29, 2011 at 14:10
  • It shouldn't look the same because it doesn't perform the same action. The visual separation aids cognitively processing that it does something different. The important thing with consistency in this case isn't that it looks the same as other element but rather that it by itself looks consistent across the site.
    – JeroenEijkhof
    Oct 4, 2011 at 15:17
  • This discussion should end with user testing. Not us talking in circles. The Flexible-user is on the horizon :)
    – JeroenEijkhof
    Oct 5, 2011 at 16:26

6 Answers 6

Reset to default
9

I agree that for this design (Programmers.SE) there should be an outline on the check mark, as there is one on the up and down vote buttons. This would make it look more consistent as well as clear. Also, the check mark should have a less "polished" look to it, maybe more rough marker-like swish.

Improve this answer
2
  • 1
    I love the current marker-like swishes in the other icons. :) They should definitely do the same for the accept answer icon.
    – Steven Jeuris
    Apr 29, 2011 at 14:25
  • I would have accepted this if my question was about Programmers.SE, but that was just an example. I updated my question to indicate this.
    – Steven Jeuris
    May 12, 2011 at 11:44
7

I think you have to consider two things:

Improve this answer
3
  • 1
    I consider myself to be a professional, and still I notice a certain slowdown (albeit small, but noticeable is enough IMHO) determining whether or not I accepted the answer. Thanks for the link.
    – Steven Jeuris
    Apr 29, 2011 at 14:26
  • Shouldn't that only happen the first time? I mean once you know an accepted answer is green you'd know on the next question, no? To be clear: I think your solution would be better - just not really necessary.
    – Phil
    Apr 29, 2011 at 14:37
  • Well I might be a little bit color blind, but when I don't have a checkmark to compare with (so only the first image in my question is visible) it confuses me. In the best case this means scrolling down a bit (I have done this more than once), in the worst case there is no icon to compare with.
    – Steven Jeuris
    Apr 29, 2011 at 14:39
4

Human-Computer Interaction (HCI) research often refers to transparency as an indication of the clarity and usability of a user interface. Ironically, it's the lack of noticing the user interface which makes it transparent. When it distracts you, as in this question, it is less transparent.

For my thesis, I am looking into Activity Theory which is a psychological theoretical framework which has been applied in recent HCI research. While reading through the book "Acting with Technology: Activity Theory and Interaction Design" by Victor Kaptelinin and Bonnie A. Nardi I came across an interesting section which reminded me of this question I posed a while ago.

In Activity Theory - as the name suggests - activity is placed central in studies which try to understand the way how people act. In this framework, any task, or activity, can be broken down into actions, which are further subdivided into operations.

Activity theory hierarchy. Activity (motive), Action (goal), Operation (conditions)

"Activity theory argues that actions and activities are usually consciously planned, while operations are performed subconsciously and without deliberation." This isn't a fixed hierarchy. Activity Theory focuses a lot on the developmental aspect of the human mind. The process of an action turning into an operation is called automatization. An example of this is when learning to "touch type". At first finding the correct key is considered to be an action, but afterwards it turns into an operation.

So far the background information. The point is, transparency can be accomplished through skill automatization. Or less theoretically put, skill comes with experience, so transparency isn't a fixed property of a system, but dependant on the user and his experience with the system.

Finally to answer the question "Shouldn't a user interface be as consistent as possible?"

Although transparency can't be "built" into the system, designers can facilitate skill automatization, resulting in transparency. One such way to support the user in turning actions into operations is by using consistent affordances. Inconsistencies prevent or slow down the user from doing this, or even turn existing operations back into conscious actions.

Improve this answer
7
  • This was a great answer, thank you! Building on what you are saying with consistent affordances I believe that the elements don't have to look the same as each other (a matter of fact, they shouldn't) but rather look the same across an artifact (app/site).
    – JeroenEijkhof
    Oct 4, 2011 at 15:14
  • @JeroenEijkhof: The affordance would indicate the same behavior. 'selected' or 'not selected'.
    – Steven Jeuris
    Oct 4, 2011 at 22:55
  • @JeroenEijkhof: Additionally, the 'shape' affordance is the same over different sites, indicating its functionality. The problem is the selected/not-selected affordance.
    – Steven Jeuris
    Oct 4, 2011 at 23:07
  • Affordance is about a perceived action latent in the UI. "Selected" or "Not selected" is a result of an action not an affordance in it's own right. The affordance would be if the checkmark is perceived by the user to be clickable. Just like how Norman's doors (jnd.org/books.html#33) were not open/closed, but rather had a perceived affordance of being "pushable"/"pullable"
    – JeroenEijkhof
    Oct 5, 2011 at 16:24
  • @JeroenEijkhof: Interesting, but wouldn't phrasing it as "perceived to be toggleable" still make it a perceived affordance by definition? Otherwise, this would make a good UX question. ;p
    – Steven Jeuris
    Oct 5, 2011 at 19:22
3

Interestingly enough, the design is actually the opposite on Stack Overflow: vote up/vote down are plain gray and get colored when a vote is cast while accept answer is hollow unless accepted. While inconsistent, one can readily compare vote arrows, and see at a glance if an answer is accepted. So I'd venture to say that no, a UI should not necessarily be as consistent as possible. The issue is only apparent within the specificity of the "draft" design, wherein the tick can be deficient in some situations.

Also, purely on a graphical point I think it does not feel "drafty" enough and thus stands out as a bit alien.

Side note: that said, the colorblind argument made something click and should seriously be taken into account. Many areas of Stack Exchange rely purely on color to express significant statuses.

Improve this answer
2

True. Buttons should have the same visual language.

Improve this answer
4
  • Normally I would downvote this, but I don't know the community at UX yet. Isn't an answer supposed to add something to the question?
    – Steven Jeuris
    Apr 29, 2011 at 14:42
  • I thought being supportive counts as an answer. I'll consider your input for my future answers.
    – erikrojo
    Apr 29, 2011 at 15:24
  • Upvotes or comments are more appropriate for that, but thanks for the support. ;p
    – Steven Jeuris
    Apr 29, 2011 at 15:27
  • 2
    really an answer should address the question. In this case the question implies the answer that you have given so your answer is redundant. A comment might have been more appropriate.
    – ChrisF
    Apr 29, 2011 at 20:41
0

I think an outline on the checkmark would look extremely tacky and believe making the arrows follow the checkmark-type convention (i.e. grayed out but colored when selected) would be a far superior option. I don't see it as a major problem to begin with, but if others do, and it's going to be changed, then grayed/colored arrows, I think, is the way to go.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.