Interaction for Web Design

images-51These two little words are being used a lot in the design sphere these days. But what truly is interaction design? And what makes you an interaction designer? Here, we’ll answer both of those questions and offer a showcase of some great interaction design work.

Interaction Design

Interaction design is a process in which designers focus on creating engaging web interfaces with logical and thought out behaviors and actions. Successful interactive design uses technology and principles of good communication to create desired user experiences.

Interaction design in terms of websites and apps is something we have been talking about for 10 years or so, but those bigger conversations and much never. One of the best and most cited introductions to the concept was published by Bob Baxley in 2002 in a 12-part series that defined interaction design for web applications.

“Introducing Interaction Design” breaks the field into five pieces that are still useful and relevant today:

  • Human/machine communication is the translation of conversations between the device and user.
  • Action/reaction looks at how interactions happen and unfold.
  • State ensures that users know what is happening and why in terms of the application.
  • Workflow ensures that users know who to use a tool or application and what happens next.
  • Malfunction takes into account mistakes that are bound to happen.

Further, there are certain considerations to keep in mind when creating design interactions. Usability.gov offers basic questions in six different categories that can help shape how the design comes together.

  • What can a user do with their mouse, finger or stylus to directly interact with the interface?
  • What commands can a user give to interact with the interface?
  • What about the appearance gives the user a clue about how it functions?
  • What information do you provide to let a user know what will happen before they perform an action?
  • Are there constraints to help prevent errors?
  • Do error messages provide a way for the user to correct the problem?
  • What feedback does a user get when an action is performed?
  • What is the response time between an action and response?
  • Are the interface elements a reasonable size to interact with?
  • Are edges and corners strategically being used to locate interactive elements?
  • Are you following standards?
  • Is information chunked into a few items at a time?
  • Is the user end as simple as possible?
  • Are familiar formats used?

 

Role of an Interaction Designer

If you find yourself thinking about or asking the questions in the list above, you are an interaction designer.

An interaction designer is the person on the design, development, creative or marketing team that helps form and create a design strategy, identify key interactions of the product, create prototypes to test concepts and stay current on technology and trends that will impact users.

This may sounds like a lot of different concepts compiled into one fuzzy job description. To make is it simple: Companies hire an interaction designer to make sure their digital applications work and function in the hands of users.

Tips To Become A Great UI

images-49It’s frustrating to find job offers looking for a UI/UX designer. While these two skillsets are closely related, their skills don’t always overlap. A quality UI designer may not understand user experience psychology. Just like a top-tier UX designer might not be a master of Photoshop or Sketch.

But there is a good amount of overlap, and to be a great UI/UX designer you’ll need to dip a toe into both worlds.

In this guide I want to comb over the fundamental skills that you should learn to promote yourself as a quality UI and/or UX designer. Job security is much easier when you can alternate between both roles. And it’ll be easier for you to see the big picture in any creative project.

User Advocation

Remember that a UI/UX designer speaks for the user. But you are not the user. This is an important distinction because most people using your product will not have the same expertise.

This is why usability testing can be so important. Ask users directly what they like and don’t like. Gather feedback. Try to find the root cause of their issues and make only the necessary changes.

Every great UX designer will be a true advocate for the user. The user experience goes beyond a glossy interface to encompass how the UI feels, behaves, and responds to user interaction. Pay careful attention to the details and be willing to scrap ideas even if you think they’re great.

In a situation where you like something that most users don’t it’s generally wise to drop the idea and rework it a little.

Listen to the user’s complaints and try to understand what they’re really saying. This is true of both UX and UI designers, although most user testing involves the UX side of things.

A pretty interface means jack if it can’t operate properly.

Advocate for the user through your words and actions. This is ultimately the #1 requirement of a UX designer. It’s a tough skill to nail down because it’s not exactly a specific skill. But I’d say having an open mind and being willing to rethink ideas will help you understand the user’s perspective much easier.

Visual Communication

Perhaps the most valuable skill of any designer is visual communication. Most designers get ideas in their head and need to explain these ideas to project managers, developers, or other designers.

Being able to sketch is a great skill to have for this very reason. But you can also communicate ideas digitally by creating digital wireframes, mockups, or interactive prototypes.

Tips for Design Cyclical

images-50Note: Use of “design” largely refers to design style, specifically mobile and web, for this article.

I was recently looking through some screenshots of apps from earlier versions of iOS. It had me thinking about where design is headed over the next five to 10 years, why we continue to iterate on style, and whether design is really getting better or simply changing in a long-term cycle for the sake of change. Is design progressive or cyclical?

The first point to consider is what style is, and why it continues to change.

In the case of digital design, there is a constant desire to see and create new styles. I’d liken it to the iPhone, for example. The style of the design is difficult to fault, yet we constantly crave a radical redesign at every year’s keynote event. The style might be different but often it’s very difficult to argue it is in fact better. The iPhone 6/7 might look different compared to the 5, but does it grip in your hand as well? Does it rest on the table flat? It’s a classic case of constant desire for change that does not always yield a better product. The same concept can be applied to digital design. We love seeing new things, experiencing new things, and design is no different.

Creatives are differentiating styles in order to maintain a unique selling point for services. Again, it’s not changing styles because they are better and help the user — it’s change as a byproduct of boredom, competition and the requirement to stand out.

José Espinosa of MIT wrote an interesting essay on a similar topic but around the concept of fashion. It’s hard not to see crossovers between the industries. This was one of the most interesting sections:

“As time passes, more and more people adapt the new style, but unfortunately not all of them fully understand its underlying principles but nevertheless follow the external changes in the fashion. Thus, the new style has become mainstreamed. The pioneers get frustrated because their style does not serve as a differentiation signal anymore.

At this point new pioneers start trying to create new styles to differentiate from the current mainstream culture. The old pioneer’s values are now a target of critics. Eventually a new style will start to gain momentum and the cycle will repeat again.”

Companies are always looking for ways to differentiate through design. When one company creates a design direction that draws great appeal, others follow. As such, the style no longer differentiates, and as with fashion, this can serve as a catalyst for change

How to protect your Apple devices

This is where a Mobile Device Management (MDM) solution can greatly reduce the time it takes to set up and deliver ongoing management. Bushel is a cloud-based MDM solution, which means that, after quickly setting up your devices, you can inventory and manage all of them quickly and consistently at anytime from anywhere. Pushing out settings to devices is simple. For instance, you can configure company email accounts or enter Wi-Fi passwords one time, and Bushel will push them out to all of your devices with a single click.

Enrolling devices in a management solution may sound like a lot of work, but Bushel makes it simple. When you sign up with Bushel, you are given a unique web address that you or your users can visit on a device that you would like to manage. The user provides answers to a few, simple questions and within a couple clicks, the device is enrolled and you are managing that device with Bushel.

For the ultimate enrollment experience, sign up for Apple’s Device Enrollment Program (DEP). When devices are purchased through this program it allows them to automatically enroll and apply specified settings when they are turned on. That way your employees and colleagues can receive managed devices that are still in the shrink-wrap… you don’t even have to touch them.

At the end of the day, security is king. With Bushel, you can ensure that sensitive company information on all Apple devices remains secure. You can enforce passcodes and encryption and even remotely lock or wipe a device over the air. Being a part of Apple’s DEP also unlocks advanced, supervised security settings that take your device management to the next level.

Apps are the key to a great mobile experience, but it can take some work for everyone to get the apps they need. Bushel allows you to centrally select and send apps over the air and even reassign them as your workforce changes. Apple has another program called the Volume Purchase Program (VPP) that allows you to purchase apps in bulk and own them as a company, rather than tying them to a specific person and Apple ID. This makes sending out and reassigning applications quick and easy.

Bushel makes device management simple and affordable for everyone, so businesses can support their users without help from IT. Manage your first 3 devices for free, and add more for just $2/device/month. Start managing your devices with Bushel today!

Whats the Difference of Prototyping and Wireframing

’m very happy to welcome you all to the first part of this online course on wireframing and creating design documentation. I hope you’ll all have fun and learn useful, applicable techniques that will make your everyday work life much easier.

I’m Marcin Treder and I currently serve as CEO of the popular User Experience Design Application – UXPin, but I’m also a seasoned User Experience Designer and a manager of User Experience teams.

In a series of 7 articles I’ll discuss, in detail, methods of wireframing and, in general, creating design documentation. I’ll guide you through tips and tricks that helped me in my practice and I sincerely hope you avoid some of my painful mistakes.

Articles are meant to be highly practical so expect just a little bit of design philosophy and a lot of real life stories.

All the examples of design documentation are created in UXPin – the first ever User Experience Design application.

Wireframe, prototype, mockup – what’s the difference?

A couple of years ago I realised that a lot of my IT, non-designer, friends were using the names of my beloved design deliverables synonymously. They assumed that a wireframe, prototype and mockup are exactly the same thing – a kind of greyish, boxy, sketch representing an ingenious idea.

The problem with their simplified view is that they never know what to expect from the work of User Experience designers and they often get confused. ”Why the hell is this not clickable?”, ”Well, I didn’t know that I was supposed to click here…” – these kind of comments are annoyingly common in UX design projects.

Confusing wireframes with prototypes is like assuming that an architectural blueprint (a detailed plan of a building-to-be) and a display house, are the same thing.

Though you may certainly try to live in a display house (you know – its beauty is supposed to demonstrate how cool other houses in the area are), you can’t count on a comfortable stay in a blueprint – it’s just a sheet of paper.

A display house and a blueprint are different means of communication in architecture:

–  a blueprint serves as a building plan and should specify how the building should be built

–  a display house provides a test drive for future residents

The same differentiation can be applied to wireframes, prototypes and mockups. They  look different, they communicate something different and they serve different purposes.

A display house and blueprint do have something in common though – they both represent the final product – actual house. And again exactly the same common trait can be applied to wireframes, prototypes and mockups – all these documents are forms of representation of the final product.

Believe it or not, the difference between a prototype, wireframe and mockup was always one of the first things I tried to teach members of my User Experience Design team.

Yes, it’s really that important.

Let’s discuss wireframes, prototypes and mockups in detail, so you’ll grasp the idea of what to use in specific situations.

Wireframe

1. What is a wireframe?

A wireframe is a low fidelity representation of a design. It should clearly show:

– the main groups of content (what?)

– the structure of information (where?)

– a description and basic visualisation of the user – interface interaction (how?)

Wireframes are not just meaningless sets of grey boxes, though they may look exactly like that. Consider them as the backbone of your design and remember that wireframes should contain a representation of every important piece of the final product.

„Representation” is a crucial term here, which will help you find the right fidelity – speed balance. You can’t go into too many details, but on the other hand you need to create a solid representation of the final design that won’t miss out any important piece of it. You’re setting a path for the whole project and for the people that are working with you (developers, visual designers, copy writers, project managers – they all need well-created wireframes). In fact you’re creating a map of a city. Every street is represented on a map, but it’s vastly simplified. You can sense the architecture of the city if you look on a map, but you can’t perceive its beauty.

Wireframes should be created quickly and almost the whole time should be spent communicating with team members and…thinking. The mere activity of wireframe-creation should be really quick.

Visualisation should be aesthetic, but this is vastly simplified. Black-grey-white are the typical colours you’ll use (you may add blue to specify links).

If something takes too much time to prepare (e.g. choice of icons, uploading images), you have to represent it in a simplified way (e.g. using placeholders – crossed rectangles for images, plus an appropriate description). We tend to call wireframes low-fidelity deliverables (lo-fi).

Remember – a well-created wireframe communicates design in a crystal clear way and sets a path for the whole team.

2. When to use wireframes.

Wireframes are typically used as the documentation of the project. Since they are static and fix interaction with an interface at a specific point in time, they should be accompanied by the written word (from short notes explaining interaction to, when needed, complex technical documentation).

However they might be also used in a less formal way. Since they are quick and simple in form, they serve well as clear sketches for inner communication in the team. If developers ask how something should be done – the answer can be provided as a rapidly created wireframe.

Consider this: UXPin is a start-up with really rapid development cycles (releases every couple of days). We use wireframes to quickly visualise tasks (even small ones!). It eliminates misunderstandings and is really cheap.

Wireframes are hardly used as a testing material, although they may help to gather feedback in initial, guerrilla-style, research, in which you don’t care about methodological purity, but rather try to get some quick insights.

Wireframes placed in the context of the whole design story can be surprisingly effective and, though in recent years they’ve received some bad press, are still indispensable as an initial stage of complex projects.

Prototype

 1. What is a prototype?

A prototype, often confused with a wireframe, is a middle to high fidelity representation of the final product, which simulates user interface interaction. It should allow the user to:

–  experience content and interactions with the interface

–  test the main interactions in a way similar to the final product

A prototype is a simulation of the final interaction between the user and the interface. It might not look exactly like the final product, but should be vastly similar (it’s definitely not a greyish, sketchy thing). Interactions should be modelled with care and have a significant resemblance to the final experience. Interdependence between the interface and backend mechanisms is often omitted to reduce costs and speed up development cycles.

2. When to use a prototype.

Prototypes are used to their full potential in user testing. Such a simulation of the final interactions forms great material to check the usability of the interface, before the development actually begins.

Prototypes usually aren’t the best documentation you can imagine, since they force the „reader” to take some effort to understand the interface. On the other hand, a prototype is the most engaging form of design documentation as the interface is tangible and straightforward.

Beware that prototyping is rather an expensive and time-consuming form of design communication. I’d suggest rather creating prototypes that can be reused in development (yep, it means that you need to code some HTML, CSS and probably IS on your own). It’s especially effective in relatively simple projects.

Done right and combined with user testing, prototyping can pay for itself.

Interactive Mockup Exercise

When you think of a good website design, what comes to mind?

For me, it’s Airbnb. I like its design not just because it has a pretty color palette or an eye-catching video on the front page, but because it was built with good user experience in mind.

But how do you define good user experience for a website?

For one, it has to be both easy to navigate and easy to search. Websites for businesses, by and large, provide information for customers and potential customers. If your customers don’t understand the information or can’t find the information that they’re looking for, then your website will have failed.

To design a great website, both the structure and the content need to work together to present valuable information at the right time and the right place. There’s a lot of coordination involved, and often times things go wrong. You can’t rush it. You have to build your website to fit the content from the ground up.

How do you start designing a great website? Build a wireframe, then iterate into an interactive mockup.

Why Wireframe?

Wireframing is a great way to quickly communicate concepts and experiment with multiple iterations of any design.

Wireframes are not full-blown coded prototypes with actual visual design. They are just low-fidelity static designs that allow you to test iterations quickly and get feedback. The best wireframes are also interactive, allowing for more insightful testing of how the design actually works.

For example, Airbnb is a travel website.

Its singular purpose is to help people travel by finding great places to visit and great places to stay. That’s how they make money. Everything on their website is optimized for that goal, from the style of their header to the way they display their listings.

Content is the heart of design. People use products and visit websites for the content not because they want the design. And when you wireframe, you allow yourself freedom to experiment, fail, and improve the structure of your most important design asset.

Timeless UI Design Principles

Before we dive into the wireframe and mockup design exercise, let’s first deconstruct how Airbnb’s website works.

1. Bring Attention to Stunning Imagery

When you’re thinking of a place to travel, you’re probably not thinking of your travel itinerary or your rental car information.

Whatever you’re thinking of, it’s likely visual. Pictures of where you’ll be staying. Images of all of the cool sights to see. When you want to travel, you’ll want to see pictures.

That’s exactly what Airbnb did on their website. Every element is highly visual.

All of the content, meaning the house listings and suggestions for places to travel, prioritize images over text. The picture frames take up most of the space, leaving a couple of bold words and a button aside for the user to act on.

The entire header is a video of Airbnb travellers experiencing different cultures and environments around the world. That’s what people want to see in a travel website. They don’t want to just fill out some plain text forms and book a home. They want to travel while they’re planning to travel.

Purposeful imagery is always more powerful than mere words.

2. Simplify Your Content

Unfortunately for people wanting to travel, the process is often very complicated.

You have to scout out the places you want to visit, decide on your trip’s location(s), find a place to live, plan at least some of your time there, buy plane tickets or plan a driving route, and so much more. It’s just a big hassle.

The last thing anyone wants to add to their travel experience is more complication.

Airbnb’s website cuts out all other distractions from their page, leaving only the most relevant pieces intact. There’s a simple bar for very simple travel data inputs, a button for hosts, and a clean, neat-looking list of listings for you to browse. There’s white space on either side of the listings, not ads or any other unnecessary information.

The fonts stand out against their backgrounds and the words and sentences are relatively simple language. Rather than endless descriptions of each site in the feed of listings on the front page of the website, each content block is a simple picture and a bold name.

3. Emphasize the Most Important Functions

Above all, you want the most commonly used functions of your website to be the most easily accessible.

What do people come to your site for?

For Airbnb, people mainly come to find housing for travel. That’s why the biggest, most noticeable call to action element on the website is the booking details bar in the center of the front page. The “search” button is colored pink-red to stand out, and a black transparent bar crosses the background behind the call to action to emphasize the call to action element.

Creative Web Design

An awesome website created by a talented and creative web designer is a thing to behold. Websites like these, set the bar so high that even approaching that level of craftsmanship seems out of reach. It sometimes seems that this task requires a level of creativity we have yet to achieve.

Like many other things in life, it’s doable. It may take years of training, and involve a fair share of sweat and tears but, — it is doable.

Let’s see how creative web designers work their magic

What are some of the key characteristics top-tier creative designers have in common? Here are five of the more common ones:

1. They work with concepts – and not just with design techniques

Coming up with great conceptual designs takes research, experience, and digging into what other creatives achieved. Success comes when you are able to take a concept, and bend it into something that offers a realistic solution to a client’s brief.

This visual concept was created by a skilled web designer using Uncode WP theme as a starting point.

In the example above, that looks easy-going with a playful twist, the relationship between the headline and the visual provides a grand introduction.

2. Creatives keep their head in the clouds, but their feet firmly on the ground

Creativity involves thinking outside the box. The visions and ideas you come up with have produce practical outcomes. Creatives are able to tailor their ideas to the extent that the websites they build exhibit top performance.

Top creative designers never neglect the UX. Uncode, the creatives’ WordPress theme created by the Undsgn team is a valuable tool. Here’s an example. Uncode’s unique and original adaptive image feature automatically delivers a re-scaled version of your pages to different screen sizes.

Part of the Uncode showcase: the fully responsive REVENANT website

Another example: Instead of the longer response time associated with serial requests, the creative Undsgn folks incorporated an innovative solution.

Am asynchronous response approach that enables the browser to download multiple images simultaneously. Creative designers are always looking for solutions, and the Uncode team brings a host of creative solutions to the table.

3. Creative designers mix techniques in with styles and trends, without sacrificing visual coherency

Learning what’s the latest and greatest is an essential part of being a good web designer. To be a creative designer, you have to learn and practice the art of blending and mixing different trends and styles.

This is an example of an effective mix – from the Uncode showcase.

The mix is subtle, but impressive. This showcase example provides insight into how a creative web designer achieved coherency. And spiced it up a bit in the process.

4. Creative web designers select tool that satisfy their need for perfection

A tool that is does not allow you to create pixel-perfect designs can be a source of frustration. Creative people, like you, strive to implement their ideas to perfection. If you can imagine it, your WP theme should enable you to build it.

Web Developers and Designers

It seems like a common sense idea: Designers and developers must work together.

But too often, these individuals work apart while working on the very same project. The designer works to create elements and color palettes and typography that looks great, while the developer codes and prepares the material for web publishing. And this can cause discord between the designer and web developer and in the final design itself.

If designers and developers work together on projects from start to finish, the result is a more cohesive web project with great aesthetics, user interface and clean code. There is less work and rework during the collaborative process, hopefully resulting in a project that can be completed in less time.

Designer vs. Developer

Traditionally web designers and we developers have been separate job titles. (You can learn more about that in a previous Designmodo article.)

Typically web designers use graphic design software such as Adobe Photoshop and Illustrator to create what websites and elements will look like. This aesthetic is then coded using HTML, Javascript, jQuery, CSS and other programming languages by a web developer to make everything work on the web.

While designers and developers may often work from separate rooms or even countries, each needs the skills of the other to create a complete website. So they have to work together.

Pros of Working Together

Simply, the biggest reason that designers and developers should work together is to create a more complete web project. From the look to interactions to experience, the project will only bet better when designers and developers collaborate. (And it’s almost impossible not to these days.)

And while we are talking about designers and developers working together, don’t forget to invite interaction designers to the party as well.

Collaboration plenty of other benefits:

  • A second set of eyes to look everything over and find flaws or mistakes
  • More creative brainstorming and design
  • A more complete experience, because designers can understand what the developer is capable of creating
  • A more cohesive finished product, where all the parts look like they belong and interactions fit the aesthetic
  • You’ll learn something about how design/development works
  • Merges ideas for a more rounded vision of what a project is supposed to be
  • Fosters focus on the mission and goals of the design project

Cons of Working Together

While I’d like to say there are not any cons to working together, that would be naïve.

There are not many downsides to collaboration. But there are two things to consider:

  1. There can be some costs associated with having everyone getting together at the same time, especially if workers aren’t typically in the same location. Use tools for teleconferencing and online sharing to communicate when you can’t get everyone in the same room at the same time.
  2. Sometimes people will disagree or just won’t get along. But we’re all grown-ups, right? We can work through it.

 

Things You Can Do

Now that you are thinking about all the reasons why you should work with a designer or developer, how can you put it into action? It starts with clear communication.

Web designers and web developers have to put the project first and think about the big picture during the process and as decisions are made. Understand that you will win some and lose some fights along the way.

The best place to start is by taking your co- designer or developer our to lunch, or coffee or for a walk. Get to know him or her and their style before you draw the first sketch or wireframe. Talk about how you plan to work together as a team and set some ground rules.

Everyone involved in the project should make a point to check in with everyone else often (maybe even schedule it in to the project calendar) to make sure that everyone is on task and on time. Remember to be nice; offer constructive criticism and be open to feedback from others. And be open to the fact that you are going to learn new things along the way, be appreciative of that.

The UX 180 Degrees

Were you ever asked to fully change the experience and UI of a product that is used by more than 3 million people? Well, it happened to me.

Let me tell you my story and the journey of the 180-degree change of Bannersnack.

Have you heard about Bannersnack?

If you are one of our users, skip to the next section. If you don’t know what Bannersnack is, take a minute and check it out. Bannersnack is the leading banner making tool for creating static and animated HTML5 banners, Flash and various social media banners, all from one place. Find out more here, or keep reading to find out the whole story about the redesign.

Today’s world is changing fast, but the digital world is changing even faster.

More and more often, we see well-established brands, apps and services changing and adapting their look and communication frequently. Technology evolves at an astonishing speed. People want to do more things faster and they need tools that can make their lives easier.

Bannersnack began its journey in 2008, the culminating era of Flash banners. It was launched as the banner making app that helps you build flash banners within a couple of minutes. It was an extraordinary achievement and a revolutionary product, compared to other similar software.

Now, as flash is dying, our attention shifts from Flash to HTML5 banners; more and more static banners are created daily and the appearance of social media has blown away everything we learned about banner design.

Workflow Comparison Talk

The ever-expanding world of design can be tough to comprehend as a newcomer. With so many tools and techniques available it’s hard to know where to start.

Three of the most widely used design programs are Adobe Photoshop, Adobe Illustrator, and the newer Sketch by Bohemian Coding.

In this guide I want to compare these three titans of industry to see how they stack up for common design tasks. All three programs are incredible, but they each have their own strengths and weaknesses for certain creative tasks. One you know which tool best fits the task at hand you’ll have a much easier time learning and mastering digital design work.

UI Design

Interface design usually relates to websites and mobile apps, but can also include game UIs or any digital screen that takes user interaction.

For years Photoshop was the #1 choice for UI design. In PS you can build vector icons and textured backgrounds to mix into one common layout. But Photoshop was always intended to be a photo editing suite, and while Fireworks was better it has since been discontinued by Adobe.

This is where Sketch comes into play. The very first release of Sketch App was in late 2010. It has since grown massively with a large community fostering learning materials and entire websites dedicated to free Sketch resources.

When it comes to UI design Sketch is currently the king. This program’s purpose was to be a UI design suite for web & mobile. Patterns, textures, and vectors all intermingle with each other much easier than in Photoshop.

The only downside is that Windows users cannot run Sketch because it’s OS X exclusive.