0

I am working on an app that shows quite a bit of textual information. None of it can be safely removed without losing the meaning (icons that you see improve scanning of the page, but still require details that are provided in the text).

Every bit of text is a hyperlink, and (almost) every link takes the user to a different place.

Here is how it looks:

enter image description here

When a user mouse-overs a link, it gets underlined:

enter image description here

The same happens for the links on the right side.

enter image description here

The problem is that people are not clicking virtually any links. Some of them didn't even consider trying the text on the left.

Chevrons on the right side (external links on the screenshots) attract attention, and some users click on them.

I have tried making all links underlined by default, but then the page looks ugly - literally everything gets underlined. I have tried adding chevrons after all links - it leads to the same issue where everything has a chevron. Removing chevrons completely makes the page look like a report.

And this is the general feeling that I got: users perceive the page to be a report, and don't expect that its elements are clickable. Reading about affordance didn't help me at all.

My question is this: when all text elements on the page are clickable, how do you make text them obviously clickable without making the text unreadable?

Update: on the mobile devices layout changes to this:

enter image description here

The three-dot menu visible here is cut-off on previous screenshots.

Improve this question
4
  • why do you have columns? is this supposed to be a hierarchy (like column 1 --> column 2 --> column 3)? If not, why do some links have chevrons and the middle column links are not in the same line as column 1 ?
    – Devin
    Jul 17, 2017 at 23:49
  • @Devin the left side and the right side show different kind of information about the same item; the left one shows item details, the right one - related links (so it's not 3 columns, but two). All 3 links in the middle row relate to the same item. Chevrons were originally an incentive for the user to click on the items, and right now they seem more like a nuisance and a source of confusion.
    – Alex Leonov
    Jul 18, 2017 at 1:12
  • 1
    What are you building for? Is this an administration page for products? As such why would you need to see all the internal links for each item? The mobile version works better as you drill into the item, change the sub link and drill out again. This, this is a mess.
    – DarrylGodden
    Jul 18, 2017 at 7:21
  • 2
    It might not be that users don't know what's clickable. Maybe they aren't clicking any links because they don't see how the links will get them closer to their goal? Think about the steps users usually take (outside of your app). Do your links use their language? Do the steps in the app mesh in some way with the user's current workflow?
    – Ken Mohnkern
    Jul 18, 2017 at 12:56

3 Answers 3

Reset to default
3

One extra step might help. It will simplify the overall process and provide more space for the item list.

For example:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
1

I don't know the context of use, but maybe rearranging elements into cards and separate content from each other will help. If there are only "item details" and "item links" interface should emphasize that.

Maybe something like that: Changed UI

Hiding some of the elements and enable the user to disclose them if needed in order to avoid difference among columns height may be necessary.

I assume clicking on "item 1 title" show other kinds of information than other links (therefore "show more" button that emphasizes the difference). What is the top priority of the screen?

Improve this answer
2
  • The list is based on the external links - they provide the guidance. Links on the left, on the other hand, allow for faster scanning of the entire page. I have a layout for mobile devices where it looks more like cards, and takes much more space too - I will update the question.
    – Alex Leonov
    Jul 18, 2017 at 2:06
  • 1
    Screens in mobile devices does not remind cards at all. There is a huge difference between line separating content and box that restrict users' attention to the specific area of the screen. I doubt that links on the left enabling faster scanning. Everything looks the same, there is no visual hierarchy. Also, third link jumping into "third" column confuses users, just as the difference in icons' sizes Tell us more about the context of use - meaning who uses it, what for, in what circumstances and what they want to achieve in that particular screen
    – Matt Wolniak
    Jul 18, 2017 at 10:26
0

Arrange the elements

Similiar to @Mateusz Wolniak suggestion, I believe you miss an opportunity to arrange your elements in a first place.

Eliminate the unnecessary icons

Another suggestion is to eliminate your icons and keep a couple of them. For instance, you can keep your list as a simple text and instead use the chevron icon for the open action.

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.