4

I am working on a website that has a variety of content types. Many different titles, modules.

Some of the modules have titles that are clickable that take the user through to a landing page for that category, some don't.

At the moment the titles that are links change colour and an underline appears OnHover, its is pretty obvious when a user is on a desktop, but when they are on a tablet or mobile, what is the best practice for illustrating in the text that something is clickable and something isn't.

I have suggested size of text, colour and using symbols to show something is a title.

For example:

+ This is a title that is clickable > **

This is a title that is not

Does anyone have some comments or suggestions on best practices for styling or labeling titles of these modules, so on mobile it is obvious what is a link and what isn't.

We are building it as a responsive website.

Thank you.

enter image description here

Improve this question
6
  • What do you mean by link? Navigation? External? Internal? Within app? Web based? Context?
    – Fresheyeball
    Jun 2, 2014 at 16:25
  • The links are on a website, the links are the titles of modules. The modules are lists of links to documents. If you click the title of some modules they list ALL the documetns in that module category. But some modules titles are not clickable, the question is what is the best way to diffierntiate if something is a link or just a title. On desktop its easy with onHover styling, but not so easy on mobile or tablet.
    – changetheworld
    Jun 2, 2014 at 16:29
  • Can you provide a wireframe then?
    – Fresheyeball
    Jun 2, 2014 at 16:30
  • I cant, its not work that can be shared publicly. Is my question not articulate enough?
    – changetheworld
    Jun 2, 2014 at 16:32
  • Ive added a wireframe. Top modules title is a link bottom one isn't. I want to know what else I should do to the title of that module to make sure the user knows its a link, as onHover doesn't work on tablet or mobile.
    – changetheworld
    Jun 2, 2014 at 16:46

1 Answer 1

Reset to default
2

Well first I would disagree with your treatment of links on Desktop. I argue that it's NOT obvious those links are click able as they require a user to hover over them to see that.

Links in general should be treated different in your design, the de-facto standard is blue and underlines, blue of course doesn't work with every design. A good designer will be able to implement a design that shows off the different colour and includes the underline as a design element.

If you cant get a design element I fall back to accessibility for the visual impaired where links are paired with an icon representing whether they travel through to an internal page or launch an external page.

If you fix your desktop implementation you fix the problem you face on table and mobile.

Improve this answer
3
  • Great, thank you James. So what we should do is look at sorting out the colours first on Desktop, possibly look at some kind of iconography too for links, which will increase visibility of these links.
    – changetheworld
    Jun 3, 2014 at 8:58
  • See how links are treated on this page on the right bloombergview.com/articles/2014-05-30/… Titles are blue, and titles that are not links are black. What's your opinion of this as an example?
    – changetheworld
    Jun 3, 2014 at 9:57
  • 1
    Titles that are click able is what our designers use to distinguishes and non-click able black. This I would say is the minimum visual distinction to denote that it is a link.
    – James Wilkinson
    Jun 3, 2014 at 16:39

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.