9

What is clearly thought out is clearly expressed and there is certainly a way to efficiently describe and classify the various user interface types that have spread.

At the UI components level, design patterns are the core classifying concepts.

At the higher level, interface types seem more difficult to efficiently name. Three examples, taken out from a thousand possible others, illustrate an almost infinite variety :

  • Skype for iOS (recent release) and its elastic and fluid layout
  • Yahoo website and its old school portal structure and look
  • Pinterest website and app and their picture based design

What set of key high-level dimensions (with their possible values) could allow to easily and efficiently describe all existing user interfaces types ?

  • 1
    I don't think this is an easy question to answer, because the user interface types stem from a combination of trends and styles for both the information architecture, types of interaction and visual design styles. But it is a starting point for categorization. – Michael Lai Jul 4 '14 at 0:37
  • The three dimensions you suggest provide a good starting point indeed. If we define an interface as any physical structure (be it visual, audio, haptic...) serving representations of data to users and receiving actions (that can also be seen as representations of data), your suggested dimensions could relate to (1) what data is represented (2) what data can be received and (3) what representations are used. Maybe a notion of purpose can also help (e.g. managing transactions, reading...). Also maybe a notion of time sync (real-time refresh vs. data retrieved at the time of the last action) ? – Pierre Jul 4 '14 at 7:18
  • 2
    Won't this list be infinite? Even the three examples you provide aren't clear. Yahoo website and its old school portal structure. What makes a UI old school? And what makes it a portal? But anyway, even having a top/right/bottom/left navigation would make a UI different. Now any of those could be fluid/fixed center/horizontal scrolling/vertical scrolling which gives 4*4 possibilities. Adding the next simple step flat/rich/text bases/image based we get to 64 and depending on content you get tables/articles/video/game/etc. All with their own UI characteristics. 256 and counting.. – Hugo Delsing Jul 11 '14 at 9:49
  • @HugoDelsing That is exactly it, Hugo. Listing them all is impossible and would not help anyway. The idea is to find a starting point to reduce that unthinkable big variety by choosing, say, 4 to 5 relevant and self speaking dimensions, and the few major "values" they can take. One example would be : refresh --> (on page load / real-time), purpose --> (media viewing / admin and data mgt / gaming...)", and so on. – Pierre Jul 11 '14 at 10:32
  • 1
    Just as for music, you can try and define a style, a tempo, a melody, a set of instruments... The combinations are infinite and the classifications are not always relevant. But it is always nice to have them. Good luck :) – Leths Jul 17 '14 at 16:01
13

Following the great work of Anders Taxboe who has categorized different types of UI elements in a classification which is easy to understand and easy to follow. At the very highest level he uses the following labels.

enter image description here

It may look odd in the beginning, but going through each category, it makes the UI Design World quite understandable:

enter image description here enter image description here

Reference: UI Patterns

To me this accounts for your first statement

At the UI components level, design patterns are the core classifying concepts

However, at a higher level, this is more complex and as such, more abstract. One can use regional labels such as Nordic Design, British Design or American Design. The problem is you get preconceived ideas of what that may or may not mean, so personally I've ruled that out.

In my years as a programmer and architect, I've learnt to label things as close to what they are or what they do. That’s why I like terms such as fluid, skeuomorphism, responsive, flat and minimalistic. Therefore, to your second statement, I’d suggest labels that represent what kind of design you expect and you have a lot easier to know how to label them.

I don’t think you should use I hierarchy here, sine one design can be both minimalistic and flat or skeuomorphism and unresponsive. I’d use tags for each design pattern I find.

  • 1
    Very interesting, thanks Benny. This gives very good insights about how to categorize the design patterns, based on the core function they are here for. Really makes us make a step forward. At a higher level, I also fully agree on labels being preferable over a hierarchy. With your post, we already have several dimensions I believe : main function/purpose, responsiveness, paradigm (probably a bit too broad...), visual style. – Pierre Jul 11 '14 at 14:09
2

I find this to be more a philosophical question. To classify each type of interface is more likely a combination of terms. We would first have to think of all the different classifications that can be applied. There are some great examples listed above and choosing one would the first step. For instance, is it a website or a web application. What are the rules for classifying one vs the other.

Me personally I go by number of interactions. Which would lead me to believe interaction type(s) would be a secondary category. Of course this is my preference as I recently took a job to redesign a website and found myself neck deep in a web application. The difference to me being instead of dealing with the usual 10 - 20 interactions I was working with well over a hundred and variable rules for each.

So relating back to Andy's example of content style, does this include the back-end as well. Is it a CRM, CMS, Feed Based, Static Content etc.. Before running into this web app, this was my top priority for identifying what I was in for.

I may be making this more complicated than it needs to be, but what can I say, I like the question.

Sticking with just the UI as originally asked I am reminded of the recent surge in articles pertaining to classifications of UX Jobs. At first the descriptions were vague and more or less opinions on what they should be, but as these conversations grew more detailed and specific descriptions were provided.

I would imagine the same could be accomplished with UI. Me personally though, it's rare that I would concern myself with anything other than; responsive, dynamic or static to start. My next concern would be content; portal, feed, eCommerce etc.. and any combination there of. If I were to take it a step further, I may start to describe layout; fixed width, single column, two column, etc.. When I try to classify I use terms that are easily digestible by those who know very little about what I do.

2
+50

I could not resist. Here is my try to separate UIs into separate dimensions. There is a Good/Bad axis on every bullet.

- Content

Quality | Sources | Refinement

- UI Components

Adequation with need | Interaction quality | Follows conventions

- Visual Style

Trend | Visual appealance | Colors | Shape

- Navigation Style

Workflow | mechanics type (fluid/elastic/guided flows/menus/infinite scroll...)

- Clutter

Space | Breath (related to the cognitive load)| Affordance

- Harmony

How everything fits nicely together. This one is highly dependant on every other bullet

- Customization

Settings | Preferences (The UI proposes some "styles" that are best suited for specific users.)

- Functionalities

The UI suits a specific set of activities, and provides functions that are desirable for users around this set of activities.

- Evolutivity

The interface progressively suits the need of beginners then experts

  • @ all of you who took some of your time to share your ideas on this question : thank you ! I do value your inputs. I must say that when I started the bounty (my first one) on this question I knew that I was ready to give 50 of my rep points to get some insights but (i) I did not know then to what extent the sequence of inputs would help clarify the question, (ii) nor did I know how they would reshape the kind of answer I could expect and (iii) and how difficult it would be to choose who should receive the bounty. – Pierre Jul 18 '14 at 6:14
  • The main reasons for awarding the bounty to @Leths are the following : (i) the categories are high-level, (ii) they form a close-to-complete set, (iii) although what I first had in mind was purely descriptive and not judgemental (i.e. without any notion of quality), they seem appropriate to both think and express a description and a level attained by the UI in each dimension, which allows to go one step further. – Pierre Jul 18 '14 at 6:15
1

Lately I have been thinking about two primary categories when creating an interface; 'interaction approach' and 'content style'. Subcategories of each help to define a UX strategy and interface.

Interaction approach

I find it helpful to first classify the interaction approach of an interface as 'exploratory' or 'direct'. I don't mean to imply that an interface has to be one or the other. There is an opportunity for crossover between these two categories, both in the overall interface and/or within separate modules or sections of the interface. This helps to define what patterns to implement. For example, a slideshow is less likely to appear within a direct interface than an exploratory interface. An exploratory interface is more likely to recommend additional products/content to the user based on what they are currently viewing.

In reviewing your three examples, I would classify Skype as direct. Someone is using Skype to accomplish one task - contact another person. Both Yahoo and Pinterest are mainly exploratory, though Yahoo could be considered direct if the person visiting the website is doing so with the sole intention of checking their email. Yahoo's portal structure will attempt to encourage exploration, but it is not mandatory.

Content style

In terms of content delivery, 'self-service' or 'directed' classifications come into play. Again, these classifications can both be used to describe a single interface. Skype's interface attempts to get out of the way and let the content be created by the users. I would consider Skype to be self-service. The content of Yahoo is obviously more text based than Pinterest, but both interfaces direct content to users. Pinterest does allow for some self-service in adding content to your own collections.

'Narrative' and 'static' are other content classifications. An individual's Pinterest page would be classified as narrative, while another person's board would be considered static. Narrative content can be manipulated by the user, while static content is served by a system. Narrative content is malleable, it can be interacted with. Static content is in place to inform the user and cannot be altered.

I am reluctant to add style as a category as I feel like style should be driven by the interaction approach and content.

I am sure there are many more primary categories that could fall in line with interaction approach and content style, but these are the two that I have been thinking a lot about lately.

  • Thanks Andy, the categories you suggest are very interesting and I like the idea of almost leaving style out of the way (at least for a start) and focus on the content and what happens to/with it. Style can come next although it is seen first. Regarding the names of the categories and the suggested values, I kind of feel that they can be fine-tuned and be more self-explanatory (direct and directed can be made more distinct for instance) but what they designate is extremely relevant. I need to think further to come up with alternative wordings... – Pierre Jul 14 '14 at 22:35
1

I'm glad to join the StackExchange's UX community and this is my first UX-related answer.

Without going into much details, nicely covered by prior answers, I just wanted to fill the knowledge gap by emphasizing one obvious, but often overlooked, aspect. The aspect, which, I think, radically influences the set of dimensions expected in an answer to this or similar questions. I'm talking about stakeholder perspective. Most of the answers to such questions focus on developer's, designer's or information architect's perspective. However, looking at the topic from a different (for example, customer's) perspective, yields a set of dimensions, very different in their essence, form and technical implementation.

  • Welcome Aleksandr and thanks for your input. Alhough I would say that most answers and comment have been shared by people who do have the end users in mind, it is true that aspect can probably be more developed here. At what level would you personally consider this dimension ? Speaking of an interface, would you say for instance that its aspect is that of an email client (makes you think of a set of features), that it is vintage (high level formal characteristic), that it is leather-textured (low level formal characteristic) or something else ? – Pierre Jul 16 '14 at 7:15
  • @Pierre: Thank you for kind words! In regard to your question about an interface, I think that all three attributes (changed from levels to avoid terms mixup) you've mentioned (feature set, high-level and low-level characteristics) are dimensions, albeit on different levels of analysis. I believe that, depending on goals and nature of analysis, all or subset of levels should be considered. Obviously, corresponding dimensions should be grouped by these levels, as direct comparison between dimensions from different levels doesn't make much sense. – Aleksandr Blekh Jul 16 '14 at 8:18
1

To add my 2 cents

At the higher level, interface types seem more difficult to efficiently name. Three examples, taken out from a thousand possible others, illustrate an almost infinite variety :

I use just this two at highest level:

  1. Marketing / information page
  2. Workflow / application page

Skype for iOS (recent release) and its elastic and fluid layout

-> Application page

Yahoo website and its old school portal structure and look

-> Information page

Pinterest website and app and their picture based design

->Information page

. Visual appeal

"old school", "picture based" are descriptions for the visual design One can use the UEQ questionnaire for this as it asks for attractiveness, stimulation and novelty in pairs of opposites. It's free, well documented and measurable. The descripition of these areas are high level.

http://www.ueq-online.org/index.php/what-is-the-user-experience-questionnaire/

Interaction feeling

"elastic and fluid" is more about behaviour or interaction feeling. There is a paper and framework for an Intercation Vocabulary. Describing the How of Interaction. By Prof. Hassenzahl Folkwang University of Arts / Germany Even UEQ is from this guy.

http://www.researchgate.net/publication/238501591_An_interaction_vocabulary._Describing_the_How_of_interaction

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.