If UX Is Not UI Then What Is IA? Confusing Digital Design Terms Defined

Standard

The digital world is becoming increasingly more complicated…and more confusing. Here are seven terms you’re likely to come across and what they mean.

1. UX (User Experience Design)

This buzzword is everywhere, but what is it? User experience is how people use your website or app and if it enables them to do what they need to do without confusion. By doing user research, creating wireframes and prototypes, and conducting usability tests, UX design focuses on making the product easy to use and providing users with the best experience possible. If your website or app is difficult to use, users will probably be frustrated and move on to something else. If they have a great experience, they’re more likely to come back and tell their friends how great your app is.

2. UI (User Interface Design)

Another big buzzword these days, user interface focuses on the tools people use to interact with your website or mobile app. UI designers stylize and visually enhance wireframes that UX designers have created. Buttons, menus, and slider bars are just a few of the key components that enable you to accomplish tasks on a website or app. For example, the interface of an iPhone enables you to send a text by tapping the green “Send” button or open a new Safari window by tapping the “+” symbol. While the interface of an iPhone is different from an Android’s, both interfaces aim to enable you to interact with them easily, accomplish tasks seamlessly, and have a positive user experience.

3. IA (Information Architecture)

Information architecture involves the way a website is structured and how the content is organized. Like building architects, information architects for the digital space create a blueprint for a website or app by categorizing everything that needs to go into it. They use flowcharts and diagrams to structure content in a way that will make it accessible to users and easy to navigate.

4. IxD (Interaction Design)

Interaction design focuses on the interaction between the user and the product. It looks at navigation components from a stylistic and functionality standpoint and builds a bridge between UI and UX. Designers consider how a product behaves when a person interacts with it. For example, when you hover over a button, it changes color. Because interaction design involves how things animate, designers may have front-end development skills such as JavaScript or jQuery. The types of interactions that are possible will continue to evolve as technology continues to evolve.

5. Visual Design

Another murky term in the design world, visual design typically involves bringing products and digital assets to life, from concept to execution. Visual designers translate a company’s visual language to create functional, consistent, and beautiful products for mobile devices and the web, as well as marketing materials. Their focus is on the digital space—not print. They often collaborate with copywriters to ensure the copy and design work together to form a great finished product that’s on brand and engaging to users.

6. Product Design

In the digital world, product design involves the design of an app or a feature, such as the ability to search within an app. It can also refer to the design of a physical product like a piece of furniture in the industrial design field.

7. UCD (User-Centered Design)

The philosophy of user-centered design came out of the University of California San Diego research lab in the 1980s. It’s the guiding principle in the tech world today and puts people at the center of the design process. Understanding the users’ needs and getting their feedback is essential to designing products real people can use and enjoy with relative ease (and without having to read a manual).

Powerful jQuery Cycle Pager Techniques

Standard

So many people raised a question that “How to create dotted pager navigation using jQuery Cycle plugin?” Its simple, isn’t it? lets play with CSS no jQuery no Cycle Plugin…

When using the pager option, the generated navigation elements are simply anchors. So if you set the pager option like so: pager:' #slideDots ' you can style the anchors with CSS code see the example: #slideDots a { background-color: #fc0 }

In addition, the navigation element for the active slide is given the class activeSlide so that it can be styled uniquely.

The pager in the example above is styled like this:

#slideDots {
  position:absolute;
  left:0px;
  width:200px;
  height:25px;
  z-index:10000;
}
#slideDots a {
  background-image:url(/images/dot-controls.png);
  background-repeat:no-repeat;
  background-position:left;
  width:17px;
  height:17px;
  display:inline-block;
  text-indent:-999em;
}

#slideDots a.activeSlide{
  background-image:url(/images/dot-active.png);
  background-repeat:no-repeat;
  background-position:right;
  width:17px;
  height:17px;
  display:inline-block;
  text-indent:-999em;
}

Enjoy!