3

Yesterday I ran into a discussion with my coworkers because after setting our app high fidelity prototype to a real user testing, we noticed that they barely saw the top nav action button which we consider is one of the most important interactions in our app:

Here are the 3 comparisons:

Button-like (the one we put for testing):

Button Like Action

Text button:

Text Like

Icon-like:

Icon Like

My hypothesis with the button-like action is that the user first sees a rounded rectangle, then notices that there is text inside and later he/she reads what the text actually says. My coworkers said that is not possible, It is obviously a notorious button.

Is there any research that would help me support my hypothesis?

It would be helpful to have suggestions for improving the button-like action in case we need to leave it that way.

NOTE: The icon-like option is the last option we would like to take for we have some view-actions that can be difficult to represent with icons.

UPDATE: I am asking this question because a 100% of the users who tested the app didn't see the button at a first glance when they were asked to "post something".

UPDATE 2: According to @Majo0od suggestions, I came up with a third design that is going to be tested:

Text plus icon plus button

This 4th prototype incorporates bolder text + icon. The reason why we choose to have the action button there is because the client is requesting us to have its logo there, always visible.

  • This is somewhat of an iOS7 convention. And it is different than the typical placement where action buttons are placed BENEATH the content area rather than above. So I don't know that it's so much the type of link/button you have, but that it's still a new pattern in general to a lot of people. – DA01 Aug 28 '14 at 17:28
  • I'm not too sure what you mean by perceived as rectangles first? – Majo0od Aug 28 '14 at 17:49
  • My favorite is the the icon or just the word instead of the button. In this specific case the icon to me reads more "edit" vs "post". – The Muffin Man Aug 28 '14 at 22:39
2

Interesting question, but I'm not sure if you're asking the right question for your problem.

You said in one of the comments that users didn't notice the button when asked to "Post something". This could be for a few reasons:

  • Potentially unclear wording - As @Izhaki clarified, this depends a lot on your users' context, but is it clear in your app what "Post" means? I'm a developer, so I have some idea of what "Post" should do, but it might be better to say "Share your thoughts", or "Add a comment", or whatever "Post" actually does.

  • Button placement - As others have noted, the top isn't ideal for a heavily used button. It's not where users would naturally look, and it's not convenient for reaching once you do know it's there.

  • No text box/input area - [Note: I'm assuming the "Post" button takes you to a separate page to input content or shows a textbox.] A lot of sites have a text box readily available for input, and the "Post" button displays when the user has entered the text box. It might not work for your design, but an input area is more welcoming than a button, at least in my mind. :)

See how Twitter does it [I added the orange box for emphasis]:

Twitter tweet area

  • 1
    Although I see where you are coming from, I wouldn't rush to conclude a button saying 'post' is unclear without knowing what the app actually does, who uses it, and what other actions are available. On a smoke detector a button saying 'Shhhh...' would be crystal clear to most people - context plays a massive part in cognition. – Izhaki Aug 28 '14 at 20:49
  • @Izhaki I agree; that's why I made that one a question. :) – CullenJ Aug 28 '14 at 20:55
  • @CullenJ thanks for this image reference, it gave my team and I a relevant point of view on how to tackle the changes. – Gus Aug 29 '14 at 16:46
2

Your hypothesis is not quite accurate.

Where the eye's focal point goes first depends on many variables. I don't think your button would be that first focal point as with unfamiliar interfaces users are typically in 'interpretation mode' - trying to figure out what the screen is all about, only then they switch to 'action mode' - trying to find action controls.

So I'd assume that for most first-time users a low-level sub-conscious visual process will recognise in its peripheral view a rectangle shape with geometrical irregularities within it (the text). These two happen in 'one go' and should suffice for the brain to conclude that this is a button for some action. Unless the brain seeks to perform an action, the button is ignored, although the brain does remember that there's a button there. All of this happens subconsciously.

You are right that once an action is sought after, the user will move the focal point to the button and will read the text (although, as you may know, not the lot - just as much as needed for interpretation; that's why you'll find it very hard not to see the word in this: p05t). Other agents are part of this process - the brain can deduce the function of something by drawing 'hints' from its position and context.

My guess is that users may not have noticed the button for a few reasons:

  • Illogical grouping - The green background groups the logo and action (that's gestalt's principle of common enclosure). But the two are not related so the 'post' action is suspected less to be a primary action.
  • Green too dominant - The green background is far more dominant than the grey of the button. If you try to draw attention to the button, the contrast is completely the wrong way around. Dominant colours, like your green, should be used for things you want to draw the eye to - not for backgrounds.
  • Position - putting buttons at the top with such background reminds a toolbar, and generally speaking this is where you often see navigation items, not primary actions.

So there is actually quite a few things in this interface that works against your aims.

Try something like this and see what happens:

A wireframe on an iPhone with a green button on a bottom toolbar

  • Out of curiosity, where did you get that iPhone vector? – Majo0od Aug 28 '14 at 20:44
  • Konigi wireframes – Izhaki Aug 28 '14 at 20:46
  • @Izhaki this mockup is defenitively going to impact our prototype, however, there is a client in the middle that wants a specific layout. I'll try to create some mockups that illustrate your suggestion. Thanks. – Gus Aug 29 '14 at 16:48
1

I would also suggest better positioning of your main button closer to the bottom where a person's thumb could reach.

Like in a computer you typically focus on places where your mouse pointer is, in mobile, user's focus is mostly around their digits.

Also, if this action is taken after reading what's on the screen, it's better to position it at the bottom so that it will be natural for the user to scroll down and take action.

0

Button would be more common way, and looks more easy to tap. Button also always outweighs attention, so it would be good as you consider it as one of the most important interactions.

If you are making IOS7-8 app for example, it is ok to use text instead, becouse thats one of the common ways in their guidelines and lots of new ios7 designed apps. But thats better for a common action, and you are trying to highlight an important action, so button would be the right solution.

Icon would be the worst choice here, becouse of less availability of information perception.

  • Thanks for your answer @dmitriy butenko, however, I'm asking this question because a 100% of the users who tested the app didn't notice the button at a first glance when they were asked to "post something". – Gus Aug 28 '14 at 17:13
  • Do you think it was because either: the text thickness was too thin to the point it was barely noticeable, or, it was because the styling was like the text "logo" making it lost in the design? – Majo0od Aug 28 '14 at 17:48
  • @Majo0od this is a very interesting suggestion, I'll generate a prototype that integrates this differences. – Gus Aug 28 '14 at 17:50
  • @Gus Awesome, let me know what you come up with! – Majo0od Aug 28 '14 at 18:11
  • Via user testing :) – Majo0od Aug 28 '14 at 18:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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