How to Create Chatbots Design

unduhan-63Are chatbots in the future of website design? These little bits of artificial intelligence are starting to pop up everywhere – whether you notice them for what they are or not.

Here, we’re going to take a look at what makes chatbots work and how to make the most of including one in your website design.

A chatbot, which refers to a chatting robot, is a computer program that can simulate conversation. Chatbots are often tiny programs that function inside a website or app and help users find information, connect to resources or just offer a standard greeting.

Chatbots are beginning to pop up everywhere. Facebook and Microsoft are leading the way, if you are questioning the validity of a computer talking to your users.

They can offer immediate engagement and connection at times when your staff is busy or just can’t connect online. They are a useful tool for answering simple questions, setting reminders or just keeping on task.

When it comes to using chatbots, it’s all about the conversation. You probably interact with at least one chatbot a day if you are an active online user.

These conversations are simple. Chatbots offer answers and solutions to common questions by “learning” keywords and “thinking” about specific prompts.

When it comes to the design of a chatbot, the persona is important. How does the bot speak to the user? What is the conversation like?

Perfect Color Scheme

images-41Nothing can make a project stand out or identify your brand or business like color. Just think: What would the “Golden Arches” of McDonald’s be without the signature red and gold?

When it comes to creating the perfect color scheme, there are plenty of things to consider. Established branding is important and should be honored if colors already exist. But if not, the world of color is open for you to explore.

Much of the design theory involved in creating a great color palette starts with the color wheel. The somewhat abstract illustration depicts the relationships between primary, secondary and tertiary colors, as well as tints, shades, tones and color combinations. Understanding the theory of the wheel can help you create and establish color schemes that are harmonious and beautiful.

There are plenty of ways beyond theory to create great color schemes as well. While the most common color schemes contain a dominant color and several secondary colors, every palette is somewhat different. You can pick a color from a photo or nature to get started or just an online tool or swatch builder as a reference point.

The colors you choose can impact the meaning of projects. Each color comes with distinct associations. Some are universal, while other color associations can have cultural ties. It is important to think about your audience in relationship to color choices so that you end up with a good fit.

No matter where you start, the idea is to create a color palette that grabs the attention of users, sets the right mood for a project and helps deliver content effectively.

Are you ready to get started? We’ve got a great infographic to help you create the perfect color scheme.

Interactive Mockup Exercise

unduhan-62When 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 designin

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.

Designers and Web

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.

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.

Onboarding Experience That Success

The term onboarding comes from the HR department. It was originally used to refer to new hires and having them “acquire the necessary knowledge, skills, and behaviors to become effective organizational members and insiders.” If you replace the aspect of new hires with new users the idea is exactly the same.

Think of it as part of the whole signing up user journey. Onboarding is part of the funnel and it’s part of the user’s first experience with you app. Onboarding experiences can be good or bad. However, I’ve found that app which see onboarding holistically within the whole picture – from getting the user to click the sign up CTA to the user using the product – have the best of experiences.

What does the user need?

Let’s starts with the purpose of creating the onboarding experience. What does the user need? What kind of information do they need to acquire in order to be successful with using your product? Do they even need an account in order to use your product? If not that affects how the user. I don’t need an account to use wireframe.cc but, it is handy if I want to save my work. Since I don’t need an account, I can start using the app right away and it’s a pretty intuitive app.

The onboarding experience here is pretty minimal but I do have everything I need in order to use this product.

Again, in Slack’s example, they require the user to validate their email before you’re able to enter their messaging app. Although you are free to download and install it without validating the email first. Most apps do ask for email verifications and some block access at some point if a user does not do this. But not all of them. This is something to be mindful of all well. How crucial is an email verification in getting the user? Decide and incorporate accordingly.

Here is another example of account creation from Eventbrite. First, you create an account by providing an email and password. Then you are asked to validate your email. (Sort of, you’re not actually asked, you’re not told what to do next but I digress.) When you click the link in the email to activate your account you’re taken to a page that tells you to create a new password.

Become A Great UI or UX Designer

It’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.

Understanding type can be one of the most difficult elements of design. There’s a lot of terminology and lingo that type designers (and designers, in general) use when talking about lettering. Sometimes it can be tough to decipher it all.

If you find yourself wondering what the difference between a hook and a counter are or you still aren’t sure how a serif and a slab are different, we have you covered with this typography cheat sheet.

It describes all of the different aspects of lettering, from terminology to components to type styles and methods of typographic manipulation so you will have a better grasp on how to understand and use typography in your design projects.

Are you ready to get started? We’ve got a great infographic to help you better understand the elements of typography.

 

Interaction Designer

These 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?

Degrees Made Grew Sales

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.

Know more about prototyping

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.

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.

Everything You Need to Know About Web Design

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.

Not impressed?

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 could watch 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.