It is often difficult for a non specialist to label or to describe some UI layouts.. Is there a glossary or a source that can help meeting the right language to talk about an interface general look ?

I have three particular examples in mind:

Example 1 is : enter image description here

Example 2 is enter image description here

This design looks much simpler, nearly like a toy.. compared to the previous one, it better fits the need of users who are not into computer tools.

Example 3 relates to onboard computers enter image description here Onboard computers are such that clicking on a list option displays the state corresponding to this option. This is highly menu-driven as once an option (or meny entry) is chosen, the user goes deeper in the arborescence and must return back to access higher level options.

Is there a good source for knowing how designers would label, describe, and differentiate such UI layouts (and more that exist)?

Thanking you in advance for your feedback

1 Answer 1


Several books deal with labeling of different layouts and patterns. Somehow I never seem to come across them in my work though. I think people aren't that aware and that the glossary would go over most peoples heads; like, you can only make yourself understood with this lingo in your internal work, not in connection with other proficiencies.

Here is a link to some examples from the immortal Designing Web Interfaces.

It's not that easy to find perfect matches between the examples from the link and your examples, but this is how I would map it:

1) I would say we might have a case Parallel Panels here - This pattern is ideal for organizing chunks of information that are similar or have interdependent tendencies. But it also has a lot of Interactive Model in it - characterized by many interactive elements associated with the key object (a calendar, map, graph, chart, canvas).

2) Well, looks a bit like a spreadsheet, but Interactive Model has calendar as an application in its description so It might be another case of that pattern here.

3) Wow... I don't see this one in any of the examples. I would maybe call it "Navigation based layout".

  • Thanks a lot! I found this source about "website navigation structures" that says the last example looks like it involves hierarchichal navigation etc.edu.cn/eet/Articles/wpdnav/index.htm.
    – Emma
    Aug 2, 2014 at 20:34
  • A stylistic difference between examples 1 and 2 is that the first one looks like a form and requires mouse/keyboard. The second rather looks like the UI that cashiers use, and is meant to type directly on a screen with fingers.
    – Emma
    Aug 2, 2014 at 20:37

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.