Mapping UI Design to Great Architecture
Understanding the different fields of design can be difficult these days.
Ten years ago, there was just "design," a term that most often referred to graphic design, but encompassed the whole field. Today, there's user experience (UX) design, user interface (UI) design, information architecture and interaction design, just to name a few of the many specializations out there. And, in fact each of these subsets of design is related to the other. While each field is an individual profession, the success of one is dependent on all of the layers working together cohesively.
(Image source)
According to this article, the order each role is completed in is: (1) information architecture, (2) UX design, (3) UI design and (4) interaction design. In short, the earliest steps handle structure while the later stages focus on moments and appearances.
We'll dive more into specifics in a moment, but what's important to note that is despite UX design coming between information architecture and UI design, IA and UI are the most interrelated fields in design, and UI is dependent upon great architecture to succeed in the hands of consumers. Why is this the case? These two elements are the core of navigation.
What is Information Architecture?
Information architecture refers to the structure of a website or app and how all of the information is organized on a fundamental level, more fundamental, even, than wireframing, a UX designer's job. Information architects decide what information and how much of it goes on each page, what the menus look like, what categories content is broken down into and more. This specialization belongs to the designers that decide where buttons and menus go, how individual pages connect to each other, and how the metadata is organized to provide the best user experience. 
In essence, information architects must sort, categorize, and present information in such a way that consumers can understand it, even manipulate it, at will. This requires creating an information funnel, from the first impressions on the landing page all the way through the details of contact information and product specs. In day-to-day work, these architects first gather and sort all of the data involved in the project and use it to create site maps and layouts and dictate the overall structure of the project.
What is UI Design?
UI design, short for user interface design, is responsible for just that: creating the interfaces that consumers use to navigate the site or app. UI designers are responsible for the layout of individual pages, creating buttons, knobs, and more to ensure that consumers can get around with absolute ease in the most convenient way possible.
If you consider information architecture to be building the walls and setting up door frames, then UI design is installing the doors, ensuring that the door knobs work, labeling each room and hallway, so the person in the building never gets lost and has access to everything they should. UI designers work with color, shapes, and alignments of design elements to maximize a consumer's ability to distinguish possible actions and understand where to find the information they are looking for.
The Overlap
It may clear to you by now why UI design benefits from great architecture, but in case it isn't, this is the heart of the issue: no matter how great an interface is, it's not that helpful to a customer if the underlying structure of that interface is confusing.
A menu may be easy to navigate and clearly indicates where a consumer can click and go, or a dashboard may use a great combination of buttons, sliders, and knobs to tweak and customize its information to a consumer's needs, but that UI design can only be so effective without an intuitive logic providing direction to each of UI's steps.
"We recently changed our architecture which enabled us to modify our UI to include more search results, and conversion rate per visitor increased 40 percent", according to Oscar Mederos of online comparison shopping site Super Offers.
For example, a beautiful menu benefits from information that has been effectively sorted by an information architect into appropriate categories. What use is a landing page with great UI in the form of an effective call to action and scroll function when the landing page opens with lengthy copy about each of the product's features?
Ultimately, UI design is most effective when it is mapped to great architecture. UI design itself doesn't dictate the flow of a user's explorations. Rather, it enables that exploration and ensures that it is a smooth experience without any rocky bumps. For UI design to be truly successful, it needs that underlying architecture to provide logic and direction to a user's actions that pushes them along a flow of information. Remember UI design can make consumer choices intuitive and easy to make, but ultimately it's architecture that decides the nature of those choices in the first place.
About the Author
Ellie Martin is co-founder of Startup Change group. Her works have been featured on Yahoo!, Wisebread, AOL, among others. She currently splits her time between her home office in New York and Israel. You may connect with her on Twitter.
