I've been looking for different ways of laying out glossary content but only seem to find layouts that look like below.

While I think this is effective and intuitive for users I was wondering if you guys know of any alternatives that are just as good or better than that type of layout.

An example of glossary layout

  • What is the criteria for judging a 'better' layout?
    – Matt Obee
    Aug 28, 2013 at 9:30

4 Answers 4


You could add a "ALL" before the "A" and open the glossary with the "ALL" selected and the whole list underneath. So the rest of the letters will act as filters of the list.

With this option you give the freedom of scroll the whole list in case the user likes it or just filter the list in a elegant way.

*Update (wireframe): Basically you enter in the page with "ALL" open, so it will be the default view of the list. Then if you click, for example in "A" you only will see the content for "A" and so.

Glossary filtering wireframe

  • Could you add a quick mock-up of this idea? I'm trying to picture it but it'd be easier if you show what you refer to. We can embed the image into the post if you don't currently have the reputation to do so yourself.
    – JonW
    Aug 28, 2013 at 10:06

The issue with this type of layout is that it works well where each letter has a lot of content associated with it. For smaller glossaries, I prefer to initially use a telephone keypad arrangement where letters are grouped, so "ABC", "DEF" and so on in tabs. This approach means that you have fewer potentially fiddly mouse clicks to make to access content.

If needed, this design can be developed into a more segmented approach once a critical mass of content is reached. I'd ensure in this individual letter approach to show which letters have associated content and which do not (simple styling will work for this).

However: Before doing any of this, I'd speak to users and understand what they currently use, how they feel it works, and test any approaches with them to get feedback.

  • I really like the grouping idea but as you mentioned but this part of the website will be using a lot of content (about 15+ items in each letter category - except for XYZ). Most of the traffic to the glossary will be coming from highlighted words in other parts of the website, Thanks for the input.
    – Nekst
    Aug 28, 2013 at 15:28

An alternative would be to just have a very long list. That way you would be able to simply scroll from one letter to the next and not have to deal with a row of links. You could use the letters to jump to a specific letter and it's easy to implement and use a search feature. Just like the iPhone phonebook really.

iPhone phonebook screenshot


i would recommend to add search, you can also add browse feature. User would be able to browse glossary by category or subject or date. i am not sure if these sample categories are relevant to your project, but you can think of it. i am adding a sample wireframe.

enter image description here

  • This is great, I am dealing with a lot of content in this section so having a search functionality is definitely something I could use. Unfortunately the content varies too much to create a tabbed system, thanks for the input!
    – Nekst
    Aug 28, 2013 at 15:33

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.