Monthly Archives: January 2017
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.
The career paths of interaction designers are varied. Some formal design programs are teaching it. Others come into it from experience or by chance. But one of the common traits of interaction designers are a thirst for how things work, not being afraid to ask questions and an ability to visualize and play with elements and concepts in new ways.
Interaction Design Concepts and Principles
So what really pushes forward the field of interaction design? What makes it different from just design? That line is pretty blurry. We mostly talk about interaction design because it carries weight and focus. But the reality is that interaction design is just one piece of good design in terms of digital, web and application design and development.
The “Complete Beginner’s Guide to Interaction Design”, published by UX Booth in 2009 is still a great reference. While some of the key players and tools have changed the concepts that drive interaction design are the same.
Here’s a look at each of those concepts:
- Goal-driven design: Why does your site or interaction exist? Figure it out and make sure your application does this one thing exceptionally well.
- Interface as magic: You don’t even really see the best interfaces. “The best interaction designs don’t exist: they don’t take a long time to load/respond; they don’t make users think; and they don’t give user’s cause for grief.”
- Usability: “Interfaces which make the state of the underlying system easy to understand and use are favored.”
- Affordances: “The best (industrial/interaction) designs are those that speak for themselves; in which, as the saying goes, form follows function.”
- Learnability: “A great deal of what comprises a usable interface is made up offamiliar components. … The best interaction designers don’t reinvent the wheel every time a similar design challenge comes. Rather, they call upon a set of patterns.”
Interaction Design Showcase
So we can’t talk about interaction design without showing some great examples of work happening around us. Each of the projects or shots below is something that gets to the heart of what this concept s all about. Make sure to visit the links to really learn more about how each of these projects (or shots) came together and work.
How will the web look in virtual reality?
The 2D web could become immersive, interactive and tangible. Imagine Wikipedia as an extensive multimedia library. Instead of reading about the Egyptian pyramids, you could wander around them, explore the inside of the pyramids, view the texture of blocks used to build it or solve a puzzle to gain access to the pharaoh’s tomb. You could even have a virtual guide accompanying you, narrating the history of the pyramids and answering questions. And all this while being accompanied by distinct ambient sound effects and sounds.
What about surfing Amazon, searching for the ultimate wedding dress? You could try them on, see yourself from a 3D perspective. You could create multiple avatars to compare several dresses to could choose the one that fits and have it delivered in one day. Visit a virtual car dealer, test-drive the car, select options, tweak the seat position, see if it suits you and … summon it (Hello Tesla!). Science fiction? Twenty years ago, shopping on the internet was science fiction. Twenty years ago, the idea that you couldwatch the Olympic Games on your VR headset was equivalent to Star Trek’s holodeck.
The hardware to achieve this, while still in infancy, is here. HD cameras, 360-degree cameras, fast graphical processors and VR handsets are the pathfinders to a new era. Expensive, bulky and sluggish at this time, as the rate of adoption will rise, the hardware will get cheaper, smaller and faster.
Microsoft’s Hololens are shipping to developers. Not the developer type? Sony’sPlayStationVR is available for preorder. In a hurry? Oculus Rift can be purchased now for $599. Expensive? Samsung Gear can be ordered for $99. If you already have a Galaxy, you could experience VR at the price of two high-quality cases. Or, if you are extremely budget conscious, Google Cardboard is available starting at $15. You can even build your own.
In fact, you can even browse the virtual web as you are reading this. Open the Janus Browser, and you can experience a very probable future of the web. You’ll have a lot of fun in Janus Reddit section, trust me.
Ready to roll? Head on to MozVr, select one of the 11 showcased projects and prepare to be amazed. (My personal favorite is Inspirit). If you’re still here instead of frantically reading the documentation available on Mozilla Developer Network, then I’ll point you to Vizor.io, where more VR goodies are available. If you happen to have an HTC Vive, you are probably on your first steps to becoming the Picasso of the VR with Mozilla’s A-Painter.
Most of the projects above are based on A-Frame, the open-source WebVR framework for building virtual reality experiences with HTML. Powered by three.js, A-Frame is created to make virtual reality accessible to the web developer and, intrinsically, to jump start the WebVR content ecosystem. A-Frame is made on top of an entity-component-system pattern and integrates with a lot of existing web development frameworks and tools. Being fully extensible if a feature doesn’t exist, you can write a component to enable a missing feature or, if you find a particular component limiting, you can fork it.
In fact, we may never have a virtual web. Unlike games, or entertainment, where VR is more or less bound to happen, a functional virtual reality web is a complex ecosystem. While individual sites could offer an interactive virtual reality version to differentiate themselves from the crowd, the plethora of sites available on the internet will still limit to a 2D version floating in a 3D environment.
And this won’t work. The basic desktop monitor is at 30 to 40 centimeters away from the user. All UI elements are there in front. A slight eye movement is sufficient to focus on the element. In virtual reality, the canvas is the environment. There is no bottom or top of the screen. Moving your head to the left, and you have additional canvas. Look down and the canvas expands. You could artificially establish a frame, where you could align icons or notifications (F22 Raptor anyone?), but this is no longer virtual reality. This is augmented reality. Virtual reality is all about creating an immersive environment.
Instead of a screen in front of us, we can have apps, browsers and even a window to the reality surrounding us. Such an environment is based on depth and scale.
To give you an idea of the canvas in virtual reality, we’ll refer to a passive VR device such as Oculus Rift. According to a paper by Mike Alger, based on useful observations provided by Samsung’s Alex Chu, the main canvas is the field of view when the user is looking straight forward. For example, Oculus Rift’s actual field of view is 94.2 degrees (110 according to specs), close to the 120-degree view of binoculars. Oculus recommends a distance of 0.75 meters to provide a comfortable experience for the basic user. This canvas can be extended 30 degrees from the center with a maximum distance of 55 degrees to the side as a result of head rotation. Upward the canvas can be increased to 20 degrees with a maximum of 60 degrees and, downward with a minimum of 12 degrees with a high of 40 degrees.
The shift to a new paradigm in UI/UX is necessary to avoid the “window” metaphor in VR environments. Developers are adapting the metaphor to suit the needs of basic VR device. On the Samsung Gear VR, the familiar web interface floats in front of your eyes. Head gestures, taps and voice commands are functioning the way we are accustomed to with a traditional keyboard and touch interfaces. And while this is sufficient to sell the consumer the idea of virtual reality, it is not enough to convince the user of the advantages of simulated realities.
Should you invest your time in learning WebVR? Definitely yes. In the immediate future, designers and developers will start including VR features on their websites. Interactive maps, educational tools and visualization tools are elements which could set your website apart and give you an edge on the competition.
Obviously, the traditional web will continue to coexist with VR. Some things are just not practical in VR. While I could read a blog post with a virtual reality handset with SPRITZintegration, I still prefer to actually read it on my iPad. And, while I love my Kindle, I prefer to read a book the old-fashioned way. The smell of typographic ink, the habit of turning pages, the written notes I scribe and the sense of accomplishment after I finish the last page are totally worth it.
When visitors land on a new website they usually have no idea where to begin. They usually just look around for nav links that might provide the info they’re looking for. But the newest trend of the “start here” page offers a much better experience.
Brand new users on your site should be inspired to keep browsing deeper into your posts. The best way to achieve this is with a single unified intro page featuring links, a small guide to the site, and even some background about yourself & the site’s history.
In this post I’ll look into the trend of start here pages to see what they offer and how you can take advantage of them in your own projects.
Introduce Your Website
The biggest reason to use a “start here” page is to introduce new visitors to your website. Since each site offers something different the “start here” pages will have a different goal based on content.
Your page should share vital information and aim to educate visitors about the site. But it should also drive visitors further into the site by sharing the best resources and links to get started.
Personal blogs run by one person could have a “start here” page that introduces the person and their history with the website. This is the case with Darren Rowse on his site ProBlogger.
This is actually one of the more well-designed examples because Darren has years of experience with writing, design, and user conversions.
He offers a bunch of links to relevant posts right off the bat. He also has an embedded intro video for new visitors who want to learn more about the site. Down lower on the page you can read about Darren’s journey and how he built ProBlogger into the empire it is today.
By starting with a personal touch readers can be enticed to keep browsing further into the site. The page is full of CTAs for Darren’s newsletter and free e-book which may garner more clicks from people who now understand the mission behind ProBlogger.
For a much simpler example check out the Modest Man page. This features a large fullsize photo of the site’s owner Brock McGoff. But most of the page centers around the value add from Modest Man as a website, not around Brock’s personality.
You can introduce a site however you want in whatever manner feels right. If you prefer to stay behind the scenes that’s totally OK.
Just understand that the goal is to educate and encourage visitors to keep clicking deeper into the site. Your start here page should answer common questions for newer users and help guide them further.
Make A Personal Connection
I briefly touched upon this idea earlier but I do recommend using a start here page on personal sites. These seem to work better for high-traffic sites where new visitors might not know about your or what you do.
But the goal with a personal page is to introduce yourself, your history, what you do and why you do it. Some people feel comfortable sharing their hobbies or family life while others keep it strictly business. There is no wrong answer.
The goal is to establish a personal connection with your visitors, or at least a semi-personal connection since it’s happening through a computer screen.
One of my favorite marketers is Gary Vaynerchuk and he has an incredible start here page on his personal site.
Since he does a lot of speaking and social media outreach most people already know who he is.
But it’s not fair to assume that everyone knows. So his start here page targets people who just want to learn more about Gary’s lifestyle. He shares info about his past and his business-building lifestyle.
Even more importantly he links out to all his social channels and links to some of the best articles on his site.
This is a good example of a personal value add where people can learn more about Gary and maybe even become followers of his work online.
On the other hand you can do something like Michael Hyatt or Chris Ducker where they both offer specific tips and handy resources for new readers.
These pages introduce the person behind the site, but they put more focus on valuable information for the reader. If you’re running a personal site chances are that you offer something of value whether a product, service, or both.
Use your “start here” page to share your personal history but also to prove that you’re an authority in your industry.
List Important Articles
Sites with 100+ pages are much harder to search through even with category archives. Your best posts often get lost in the shuffle so you should do your best to include these links in your start here page.
New visitors won’t know where to start on your site or which posts are worth reading. Create lists of your best articles and encourage new visitors to check them out.
The start here page for A Life of Blue talks about travel and living with a nomadic lifestyle. These topics permeate most articles on the site, but some posts are more valuable to new visitors.
As you scroll down the page you’ll notice a sub-heading labeled “What should I read first?”
This is a beacon for new visitors who might be asking themselves this very question. It has a list of 10 popular posts related to travel and living free outside any specific lifestyle.
Other links point towards a free e-book and the site’s category archives. These are all valuable to new visitors but a list of recommended posts is the best place to start.
Another example I really like is the start here page for Hilah Cooking. While it does have a brief intro it also has many recommended links broken up into sections.
These aren’t just links cherry picked at random. They’re detailed recipe guides organized by preferences like basics, American classics, and vegetarian meals.
Internet users are incredibly impatient and they want to move fast. Providing a list of links is great, but organizing them based on context is even better.
I also like how this page is relatively short. It keeps attention where it belongs and gets visitors moving into the site. This should be the goal of every start here page, and recommended reading links offer a method of further engagement & pageviews.
You can be the most creative and productive designer in the world, but it doesn’t mean anything without paid work. Designers can rely on repeat clients but it’s important to keep meeting new potential clients and building future relationships.
In this post I’d like to share tips and strategies for getting your work out there into the eyes of clients and other designers. There is no one best method to use, and in fact you should employ multiple strategies to garner the largest reach possible.
But make a game plan and learn why self-promotion is so important. Through practice it’ll become a lot easier like second nature.
It All Starts With A Portfolio
This should be obvious but I’m surprised how many designers have a weak portfolio of work, or even worse nothing at all.
Everyone uses the Internet and there’s no reason to believe this is slowing down.
If you do any digital work then you should have an online portfolio. This includes all creative jobs whether you’re an icon designer, web designer, digital artist, motion graphics designer, or anything similar. And this doesn’t mean that you need a custom website domain (although it’s a big help).
But you can setup a simple free portfolio on a service like Tumblr, Dribbble, orBehance.
People often browse these websites specifically looking for talent to hire. Your work needs to be good to actually land jobs. But having anything online is better than nothing.
You can always delete old work and upload new work as your skills improve.
But just get yourself online and get your work up. This makes it so much easier to share your work whenever someone wants to see what you can do.
The worst situation is when you meet a new potential client that’s looking for a designer but you have nothing to show them. So if you don’t have anything up online that should be your first step.
The problem is that some designers have no work history, and therefore have nothing to put in a portfolios. In this case I recommend building practice projects and using them as work samples. These projects can demonstrate your skillset and also force you to keep practicing.
Build A Social Following
Have you heard of the Seinfeld spec script written by Billy Domineau? He wrote a magnificent spec of Seinfeld with a plot surrounding the 9/11 attacks. Within a couple weeks of posting it online the script was shared on Twitter by fans and professional writers. Billy quickly received major media coverage and offers from talent agents looking to represent his writing.
This all happened from creating one project that blew up on the Internet. Never underestimate the power of social influence. This can radically improve your career and it doesn’t mean you have to go viral to see success.
One mistake I often see is a complete lack of social media presence. Designers can be somewhat isolated people which can lead to ignoring social media altogether.
But if you create awesome stuff then people will want to follow your work. This could be on Twitter, Instagram, YouTube, Dribbble, or all four networks combined(among many others).
The simplest way to promote new work is to share it with an existing fanbase of friends, colleagues, or strangers who already know what you do.
With the Internet you can have followers around the world who have never met you before, but they can still appreciate your work and even reshare it to bring in more attention.
This is Billy Domineau’s story and it can be yours too.
I’m a big fan of Gary Vaynerchuk on this subject because he talks in plain English and lays out all of his social marketing knowledge bare for the world to consume. I would highly recommend browsing his YouTube channel if you have the time.
He talks about building your own personal brand online, providing genuine value, and being confident in what you create. This will take time but once you have an existing fanbase it gets much easier to keep growing.
When you think of social growth you often think of random people and vague social circles. But the concept of outreach goes in the opposite direction by focusing on direct contact with specific people.
This means reaching out and purposefully trying to build relationships with anyone on the web or in real life. The web is often easier because people can respond on their time. But this doesn’t make it any better to see results.
I love digital outreach when done properly. Don’t just send an e-mail to an editor of the NY Times asking to write for them with zero background or prior history. That seems desperate and spammy.
Instead think strategically and try to build real relationships. How could you get to know an editor at the NY Times? What value could you offer them? What sort of dialogue could you strike up that would make your conversation memorable?
These questions aren’t easy to answer and they’re much tougher with a big personality or social celebrity. It’s better to start small by contacting other designers in your niche, or bloggers that might cover your work.
Build a rapport and look at outreach as relationship building. You don’t want a one-off favor from someone only to then completely ignore them never expecting to speak again.
Outreach should help you build close-knit relationships with very specific peoplewho can help you, or whom you can help. Both strategies build your network and you never know who somebody else knows or could connect you with.
Also since most freelance jobs are about who you know this is a crucial strategy for self-promotion. If you know a lot of people and feed value into those relationships you increase your chances of serendipitous meetings.
Marketers have a different concept of outreach but it follows a similar formula(add value and build relationships). Check this post on BuzzSumo’s blog to learn a bit more.
Attend Conferences & Events
In-person networking is just as important as digital networking. But it’s also very different because when you talk in person you can read facial expressions and body language that you just can’t pick up from a tweet or an e-mail.
Almost every industry has its own series of conferences or local meetups/events. I would highly encourage every designer to attend at least one of these events to see what they’re like.
Don’t go with the expectation of selling yourself or landing new jobs. Yes you can find work, but it’s more valuable to make friends and build lasting relationships with other designers. You might end up making a designer friend that gets offered a job and they simply don’t have time for it, but they know you’re good so they recommend your name.
You’ll never be able to predict how relationship building can turn into work. It’s best not to worry about the work opportunities and instead focus on relationships.
Most larger conferences have guest speakers who impart their experience and advice working in the field. These talks can be enlivening and help you improve as a designer.
But the true magic of every conference is the networking. Just try to move past the idea of networking being dirty or sleazy like a used car salesman.
Look at everyone attending as someone like yourself. A designer who wants to get better and work on awesome projects. But these attendees are also humans with a family, hobbies, likes and dislikes.
Bring a humane approach to your networking and you’re guaranteed to see growth.
If you’re looking for a big list of design/creative conferences read this post on Quartz. It’s slightly outdated but most conferences listed in that post are annual so you can check the newest dates for this current year.
You can also search for conferences on Lanyrd to see upcoming dates, events, and venues to plan tickets in advance. Meetup is another site with smaller local meetups rather than big orchestrated events.
But all of these events have one thing in common: people. Learn to meet people and treat them like people and you’ll have a much better career as a working designer.
Promotion can be broken into what you’re promoting and how you’re promoting it. As a designer your work should always be A+ quality. But if nobody knows what you do or the type of work you can make then you’ll never get anywhere professionally.
I certainly hope this post can help you view self-promotion as a necessity to success. And if you approach it from a people-first perspective then you’ll have a lot more fun and success doing it.