11

Long ago when I was just a lad, I sat in my Votech computer programming class and learned Visual Basic. Visual Basic proved a wonderful primer for learning about UI components and their names. I learned about the text box, the list box, the dropdown, the combo-box, the button, etc.

Then later in life I learned about html, and ui design patterns such as the bread crumb, the menu, the footer, etc...

Now that mobile websites and apps have emerged, I'm wondering where I can find a list of UI components for mobile apps. Obviously there's over lap between these and VB / HTML but I've noticed that there are new things here as well, such as menus that scroll horizontally off screen (for example Google on a mobile device), menus the appear behind a page when clicking the three horizontal bars.

What are some good sources to learn the short-names of mobile ui components like these?

Improve this question
2
  • 3
    As a UX person I find the set library of components approach overly limiting. It tends to lead to the wrong UI elements used for the wrong solution.
    – Stewart Dean
    Oct 14, 2013 at 13:59
  • 1
    On an individual level, I'd agree, but on a group level, I've found that component libraries are often a way to get a UX team to EXPAND their options rather than limit it to only what they've personally worked with. So I think it goes both ways (depending on the team)
    – DA01
    Oct 15, 2013 at 14:32

4 Answers 4

Reset to default
8

There are several 'showcase' pattern libraries out there that can give a nice overview of what's available and trending:

And many more (if anyone knows others, please add them to this list).

Improve this answer
0
4

As a basic resource, I personally like the Designing Mobile Interfaces Book. But in addition, you should always check the vendor specific UI-Guidelines. For example The Android Design Guide

Always keep in mind that some patterns are known under different names. One example: I often hear the term Spinner for a loading indicator (mostly from iOS developers), while it's called a ProgressBar on android (although it's not a bar...). A Spinner on Android is a Drop-down-box. This is also one reason why I like the suggested book - they try to keep it general and call it a Wait indicator, and that's pretty much what it is.

Improve this answer
4

A useful source for correct naming conventions of mobile Ui components would possibly be the UI guidelines for the main mobile OS's

Android User Interface Guidelines

iOS Design Resources

Design library for Windows Phone

Also worth taking a look at other guidelines here - http://www.theuxbookmark.com/2010/08/interaction-design/a-monster-list-of-ui-guidelines-style-guides/

Hope this helps.

Improve this answer
1

Another resource you can take a look at is UIPatterns.io. It is a curated list of ui patterns for mobile with interactive examples and explanation.

It is platform and technology agnostic, goes for the basic concepts of designing great UI.

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.