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

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
    Commented Aug 28, 2014 at 17:28
  • I'm not too sure what you mean by perceived as rectangles first?
    – UXerUIer
    Commented Aug 28, 2014 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". Commented Aug 28, 2014 at 22:39

4 Answers 4


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
    Commented Aug 28, 2014 at 20:49
  • @Izhaki I agree; that's why I made that one a question. :) Commented Aug 28, 2014 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
    Commented Aug 29, 2014 at 16:46

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?
    – UXerUIer
    Commented Aug 28, 2014 at 20:44
  • Konigi wireframes
    – Izhaki
    Commented Aug 28, 2014 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
    Commented Aug 29, 2014 at 16:48

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.


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
    Commented Aug 28, 2014 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?
    – UXerUIer
    Commented Aug 28, 2014 at 17:48
  • @Majo0od this is a very interesting suggestion, I'll generate a prototype that integrates this differences.
    – Gus
    Commented Aug 28, 2014 at 17:50
  • @Gus Awesome, let me know what you come up with!
    – UXerUIer
    Commented Aug 28, 2014 at 18:11
  • Via user testing :)
    – UXerUIer
    Commented Aug 28, 2014 at 18:12

Your Answer

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

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