Close

Hit ESC to close

A sketch, wireframe, mockup, and prototype are all very different things, but they are all interconnected. These are very similar exercises that help you in ensuring that you are going in the right direction and have completely understood what the app is trying to achieve. These are pre-development activities that are different in how they work but are still used interchangeably and synonymously.

The development process is both time-consuming and expensive. You can’t really afford to waste so much time and resources by doing silly mistakes in the development process and then having to repeat it. This is why you should have a clear idea of what the app is trying to achieve and this can be done by first making a sketch, then creating a wireframe, then designing a mockup, and then in the last, the prototype. These can help you fill those gaps easily. But how are these different?

Let’s First Take a Look at the Design Phase -

Every development cycle has a design phase where the plan is drawn out and a picture of what it will look like is presented. In the case of an app, it works the same way. This design phase tells you what your app will look like once it is developed. It also shows you the behaviour of the app when users try to interact with it. The actual design process only begins once the design is approved.

A Design Process Goes as Follows -

  • Sketching
  • Wire-framing
  • Mockup
  • Prototyping

Why Should You Have an Initial Design Process?

Consider the initial design as a blueprint of a building. You never build a building or a monument by simply putting together everything that you have. You first create a design and then give it for approval. Once it is approved, only then do you actually build it. If you start without approval, you are bound to make mistakes and it will be impossible to dismantle the building every time and start afresh. The same applies to a software development process. It is easy to make changes to a sketch or wireframe than to change the final product.

 - What is a Sketch?

A sketch is probably the simplest representation of the idea of your app. It is a simple visual representation of the app based on the ideas and inputs you have received from your clients. A sketch is just a freehand drawing on paper. It helps you visualize the information communicated to you. A sketch helps in getting a common vision of the idea presented to you.

- What is a Wireframe?

This is again a visual guide of the app but you add all the things that you couldn’t add in the sketch. A wireframe gives you a rough idea of the input, how it is processed, how the screens will be presented, how the elements will look etc. A wireframe tells you what happens when an action is taken using the app. If there is content on the screen, the wireframe gives you an idea of how that data or element will be presented in the app.

- What is a Mockup?

The wireframe shows the basic structure with the contents of the app and the functions, whereas a mockup adds design, colour, style, and typography to it. A mockup shows a realistic picture of how things will shape up in the end. The visual representation of the mockup will show what all will be covered in the final picture. At this stage, these elements can be interactive or they cannot be interactive depending on how far you go with your mockup.

- What is a Prototype?

A prototype is a final visual image of the app. The prototype acts just like the app to some extent. The code used for development is not used for creating a prototype, but it can still have clickable buttons and other components of a real app.

Conclusion

Creating a sketch is the most basic design function which can be performed even by a non-technical person. A wireframe acts as a more three-dimensional sketch. A mockup gives you a picture of the idea that you have so you can come up with better visual suggestions. A prototype is very close to the final app. Even though these words are used interchangeably, they are very different in how they work.

Do you need help with user interface design? Contact us here and reach out to our team.

Every few months, the user interface and user experience design have some or the other kind of advancements and those advancements become the most trendy thing of that year. This year, one such trend is the rounded corners. Is everybody trying to swap the sharp-cornered buttons with rounded corners?

In the past few months, rounded corners have become more of an industry standard rather than a design trend. Rounded corners have not only become common on software interfaces but also on hardware product designs. But why are rounded corners so popular? Is it true that rounded buttons have better usability? How do professional UI/UX Designers make a decision here? These are probably minuscule decisions, but they play a big part in the usability of a design.

Is it easy to recognize buttons with round corners?

It is true that rounded corners are better to look at and easy on the eyes. A simple example is of cards. When you put them in a line, it is much easier to tell the number of cards. This happens when they have rounded corners. Sharp corners will make these cards look identical and will not attract a lot of attention. The round corners act as a distinguishable edge and guide our eyes to acknowledge the visual differences. Rounded corners are also said to perform a lot better in a grid layout than sharp-cornered buttons.

Using Fully Rounded Buttons

If the interface has enough space, then the fully rounded buttons are a good choice. Spotify does this by using fully rounded green buttons on its web and mobile app. These buttons have successfully guided users on call-to-action buttons. This works for Spotify as the user experience is surrounded by play: music, podcasts etc. The primary interaction is simple and straightforward. It is extremely easy to distinguish fully-rounded buttons on albums. This will encourage the user to tap on “play”.

But fully rounded buttons won’t work when:

  1. They look like tags. When you design a fully-rounded button and make it look like a tag, it will only confuse the user. The user will not be able to decide if its a button or a filter.
  2. Displaying nested options. There is a chevron icon on a fully rounded button which will show that there are nested buttons available. This will limit the size of the chevron icon. The area to click on is pretty small. Using a semi-rounded button might work. This will act as a pop-up button. The available options will be shown upon clicking, which is much more effective. Apple doesn’t really support using rounded buttons as action buttons.
  3. Stacking. If you have a data table with 10 rows and each row has a rounded button that will make it look like a primary action button. Users will only be able to concentrate if you manage to minimize the presence of buttons.

Rounded Corners are more Aesthetically Pleasing

It is true, rounded corners look more aesthetically pleasing and also look modern. This trend of making use of fully-rounded corners in the user interface started with mobile apps and slowly went into being for the web as well. What rounded corners do really well is that they communicate optimism and openness along with providing a sense of simplicity. It all makes sense why so many design systems have recently adapted to rounded corners. Many brands and design systems have used rounded corners as icons and buttons.

Google Chrome browser was updated very recently and the first thing I noticed was the use of a fully rounded address bar. This is where Google has managed to merge the functionality with the search bar on the mobile app. A brief view of the search results will also be provided while you type even before landing on a new page. Even other updated Google apps like Calendar and Drive also have round shapes.

Wrap up

There is no right decision to be made here. Adapting rounded corners completely depends on what a brand is trying to communicate with its design. The rounded corners will only add a certain degree of simplicity and sophistication along with making the overall design more appealing and easy-to-understand. To get the right guidance on rounded corners, design trends and any UI & UX design related information, check out our Portfolio to see our work.

There are icons everywhere around us, be it smartphones or websites or software. Not only online, but even the offline world is filled with icons. Some of these icons like play, pause, and print are so common that don’t require any additional explanation.

We know exactly how they function. This is the most common aspect of a design or an icon- usability. The main objective of usability design is to help a user in achieving their objective quickly and easily.

Also Read: Basic Tips on Designing for Mobile Augmented Reality

Benefits Offered by Icons

  1. Space. Icons help in saving a lot of space. This is important especially for platforms like smartphones where the use of an icon can save some space. As it is there is limited screen space on a device like a smartphone.
  2. Recognizable. Icons are easy to recognize. Making use of common icons in a design will help the user in instantly recognizing them. This also helps largely with tasks and navigation.
  3. Touch Target. Icons are good as they make the perfect touch target. The standard icon size for any device is 1 cm by 1 cm. This can make the icon an ideal target which can be easily tapped by your finger.
  4. Universal. Icons don’t need a language, they themselves work as a language. Icons are very easily understood even if the user doesn’t understand or speak your language.
  5. Aesthetics. Icons are also more aesthetically appealing than text. A well-designed icon will definitely improve the look of a website or an app and make it more aesthetically appealing.

Common Mistakes

When there is a mistake made while designing an icon, it can affect the user experience. The biggest mistake is making an assumption that your user will understand the meaning of a particular icon. Some of the common mistakes that caused usability issues are as follows:

  • Using an icon that doesn’t convey the right meaning or using an unrelated icon.
  • Not having enough space for icons on smartphones.
  • No corresponding text labels with the icons.
  • Being way too creative and compromising the recognition aspect of the icon.
  • Not using a commonly recognized icon.
  • Adding too much graphic detail to an icon.

Types of Icons

  1. Universal Icons. There are few icons that have universal recognition and can be easily recognized by users all over the world. For example, the symbols for home or print. But these icons can have different meanings based on the interface.
  2. Icons with Conflicting Meaning. Using a commonly used pictogram will often cause trouble. These two icons compete with each other and the functionality of these icons differ from app to app.
  3. Unique icons. Icons are usually not strong visual representations and can often be bad for anything abstract.

Guidelines for Avoiding Common Mistakes

  • Familiar icons will work far better than trying to reinvent the wheel and bringing in a new icon.
  • Make use of icons in order to save space. This also improves recognition in toolbars and navigation.
  • The icons you use must be quick to recognize. Use icons that have been used before.
  • There should be no experimentation with the file type icon for file downloads.
  • An icon should always communicate something. Do not overuse it or just use it only for decoration.
  • If it takes more than 5 seconds to think of the icon you used, forget about it. It won’t work.
  • Make an icon simple and familiar as it must communicate the function and the actual purpose of the icon.
  • The space around the icon must be 1cm x 1cm for easy tapping and legibility.
  • Icons are good targets for devices with limited space.
  • The icons must be consistent and close-knit.
  • Always make use of labels for icons.
  • A user must be able to tell the use of an icon without a text label.
  • Avoid any icon that could represent multiple meanings or conflicting meanings.
  • The “heart” and “star” icons must be used carefully as they can confuse the users.
  • Make minimum use of complex shapes and graphic details.
  • The shapes and colors used must be distinct that would help the user recognize the icon.
  • Do not use similar icon for different purpose and a different icon for a similar purpose.
  • If you are ever confused, remember that the best icon is a text label.

Wrap Up

In the article above, there are tips and tricks and also UI/UX guidelines that many newcomers can go through and learn. This is important as UI/UX is one of the major and basic things in the development of an app.

The process of creating an app or a website becomes much easier with wire-frame tools at your disposal. The website mockup tools help you by breaking down the product and bringing more focus to the functions and user interactivity. This will help the clients in understanding how an app or a website will be working.

If you try to do this verbally or in writing, a lot of functions will not be explained properly. Whether it is a Progressive Web App or a Single Page Application, wire-framing is one of the most important stages in the software design process. It is not something that can be avoided at any cost.

If you are not able to explain the functions efficiently, it’s neither useful for you nor for your clients. This is why you must make use of wire-frame tools. Different tools offer different levels of functionality. Using a wire-framing tool, developers, designers, and project managers can start the design process of an app or a website in a better form with more confidence. Depending on the level of functionality of your app or website, you can choose a wire-frame tool that is more suitable to your needs.

Take a look at the following list of wire-framing tools.

1. Sketch

Sketch helps in preparing in perfectly responsive wire-frames. Sketch comes with the power and flexibility of a vector graphics editor. If you are making use of a vector-based design tool, you get to use the abilities that are of a powerful tool like Photoshop. Sketch is one of the most popular tools used by designers, specifically for those using Mac.

2. Venngage

Venngage is an online design platform that helps marketers create easy-to-edit and professional designs. Venngage also has a Poster maker that can create stunning designs. The perfect poster should be eye-catching and interesting, as well as effectively communicating your important information. There are hundreds of poster templates made by their in-house designers which makes easy for users to create engaging posters. If you're looking for a motivational poster template, a research poster template, or an event poster template, you can use the online poster maker Venngage

3. Balsamiq

Balsamiq boasts itself for being a rapid wire-framing tool. It has the ability to create the magic of making a whiteboard idea and bringing it alive on your computer screen. The sketch-style aesthetics of Balsamiq make sure that the focus is more on the content and relation. It removes distractions which can be dealt with at a later date.

4. Lucidchart

Lucidchart is very well-known diagramming software known for its mind maps and build flowcharts. It helps you build these charts with the help of a simple drag-and-drop UI. Lucidchart also works as a collaboration tool, in-editor chat, and supporting commenting.

5. Microsoft Visio

Microsoft Visio initiated as a drag-and-drop diagramming tool. Visio prides itself for having a vast library of symbols, connectors, and pre-made shapes. In addition to that, it reinforces real-time collaboration and the capability to visualize the drawings on the web. If you are working with a Microsoft-heavy technology stack, then Visio will be a natural choice for you.

5. UXPin

UXPin works as a collaboration tool and a UX design platform. In addition to helping mobile app designers, even developers and project managers can benefit from using UXPin. UXPin helps you in creating low-fidelity wire-frames, high-fidelity mockups etc with extreme ease. There is also easy integration with project management tools like Jira and Slack. It also integrates easily with design tools like Sketch and Photoshop.

6. Axure RP

In addition to creating mockups, Axure RP also lets you add functionality to the layout and draw a communicative layout. It also offers sitemap and other widget tools in the form of UI elements. The interactive mockups can be created for both apps and website. There is a built-in share function that lets you see your design on your phone.

7. InDesign CC

Indesign CC helps you in creating an interactive PDF which can work as a wireframe for your website and app. This is done by including object states and animations. InDesign CC also allows you to create libraries that consist of page elements. So creating reusable interface graphics will help is possible and much easier.

8. Photoshop CC

Photoshop doesn’t contain libraries of interface elements. But if you want to create a wire-frame in a quick and straightforward manner, then it is the best option for designers. For those who are already familiar with Adobe products, sketching out ideas is much simpler for them.

Choose the right wire-framing tool for your needs

The list mentioned in this article is just a bunch of website mock-up tools that have been vastly used and are still preferred by designers on large scale. But there are still many such mobile app design tools that haven’t been used much or explored and are at our disposal to make the most of it.

Designing and developing a user experience is not as great as data-driven UX design. The concept of UX helps us measure consumer’s interest, behavior, preference, and emotions. Using Google Heart Framework UX measurement, you can measure the emotions and attitudes of your users for a particular product or a system. User experience covers the interaction between computer systems and humans. Through this, you can know how the system is perceived, how efficient it is, and how easy it is to use the system.

Source

Do you wonder why you have a lot of visitors on your website, but not enough conversations? To know this, you need to measure the user experience of your website, or app, or the overall system. A user experience team needs to adopt useful metrics in the UX design. For this, you must consider Google’s HEART framework. Let’s take a look at Google’s HEART framework and how it can help you measure and improve the user experience.

What is Google HEART Framework?

In the routine, user experience designers have to measure user experience on a smaller scale which is comparatively easy. This way you can have a conversation with your users, get to know them, receive feedback etc. But large scales measurements which are done via automated means had no particular framework. This is where the HEART framework comes into play.

Recommended: Will 2018 be the Year of React.JS?

There are five metrics covered under the HEART framework. They are:

  • Happiness
  • Engagement
  • Adoption
  • Retention
  • Task Success

1. Happiness

Happiness is one of the major attributes of the framework and stands for the H in HEART. It evaluates and measures the behaviors, attitudes, and emotions of the users. These points are noted and collected in the form of user surveys. This attribute helps you in knowing whether the consumers or users are happy or satisfied with the product or the system. It gives an overview of how the users feel.

2. Engagement

Engagement here refers to the overall involvement of the users or the consumers with the website or the app. The engagement levels of the users can be measured using tools like the duration and intensity of the interaction, the depth, and the frequency of the involvement as well. There are many examples of describing user engagement, for example, the number of visits per day on a social networking site.

3. Adoption

Adoption is used to describe exactly how and at what rate is the new service or product is accepted by the users or the consumers. It can help you in measuring if there are any new visitors and if the old visitors have finally converted into consumers. A new product or service should be able to retain the old customers and earn new ones as well. You can measure this by the number of new accounts created.

4. Retention

Retention refers to the rate at which the old or the existing customers or users of your product and services return to get more of your services and products. This can be described as the number of users who continue to use your products or service constantly for a certain period of time.

Just concentrating on the conversion rate is not enough. It is extremely important to keep a watch on the retention rate which should only go up. The number of users or retained can tell you a lot about your products or services. Not just that, it tells you about the cost, effectiveness and, ease of use of your product or service.

5. Task Success

Task Success is a very important aspect because it considers the traditional behavioural metrics of UX. The effectiveness and efficiency, as well as the error rate of a task, is covered in it. It is more suitable for task-specific features of a product.

Improve Your User Experience With Google Heart Framework

The Google HEART framework doesn’t necessarily have to be for an entire system. It can be applied in parts and features which you feel require more assistance. It is up to you to know which of these features to use for your system. The Google HEART framework can be really useful in helping you identify any underlying problem and how to fight it. The system improves and the work becomes efficient and effective as well. Meanwhile, if you are planning to design and develop your app, contact our team of mobile app development experts, today.

Main objective of this post to give you the best example of How to work with SVG Sprites to Reduce Load Time

Compatibility: IE9+

It's an excellent way to handle images (mostly icons or similar). IMO, Its a superior way than using the icon fonts. This method also includes scaling and coloring of icons without using a different image file. But, Before I start with SVG Sprites and how to use it, I want to give a quick brief about Image Sprite & SVG.

Image Sprite

An image sprite is a logical group of multiple images put together as a single image. Using a single image instead multiple helps reduce the number of server requests and save bandwidth. With CSS we can show needed part of the sprite. I have included a quick example.

Image Used:

SVG Image

SVG stands for Scalable Vector Graphics. Its a format of vector image based on XML. Because they are scalable and don’t lose quality like rasterized images, we can use the same image for different dimension without the need for multiple images. It is also helpful for the sites which use same icon/image in various colors.

PRO TIP  SVGs are also great as a replacement of 2x sized images for the higher device-pixel-ratio.

Combining the power of Image Sprites and SVG gives us SVG Sprites. As we now know using SVG reduce the need for extra images for dimensions and color on top of that with sprites we further reduce the server request for multiple images. Let's start with creating the SVG Sprite

Creating SVG Sprite

It is so simple that you can manually do it. Here is how you should do it.

1. Open the .svg files with any text editor one by one (I prefer Sublime Text).

2. You will see some code like below for each SVG file:

The part of the code which you should copy shape(s), path(s) or whatever inside g tag here or in some case inside symbol tag.

3. Create a file svg-sprite.svg or something similar with following code template:

Notes:

34. Use the content from your each SVG files and the final code in the file should look something like the

You can alternatively use this NPM module svg-sprite

Yay! SVG Sprite is completed now and ready to be used anywhere in your web page. Now, its time to know how to use it.

Using SVG Sprite

1. You need to put your SVG Sprite code at the top of your HTML Document. Including the example to do it in php

Remember you need to inject this code at the top of the document. Also, you can use any language you want or just copy paste the final content of your sprite file.

2. To show the icon wherever you need to use the following code:

3. Additionally, you can use the CSS to style them, change color or even size

I have put together all the code and hosted it on JSBIN JS Bin - Collaborative JavaScript Debuging

A sketch, wireframe, mockup, and prototype are all very different things, but they are all interconnected. These are very similar exercises that help you in ensuring that you are going in the right direction and have completely understood what the app is trying to achieve. These are pre-development activities that are different in how they work but are still used interchangeably and synonymously.

The development process is both time-consuming and expensive. You can’t really afford to waste so much time and resources by doing silly mistakes in the development process and then having to repeat it. This is why you should have a clear idea of what the app is trying to achieve and this can be done by first making a sketch, then creating a wireframe, then designing a mockup, and then in the last, the prototype. These can help you fill those gaps easily. But how are these different?

Let’s First Take a Look at the Design Phase -

Every development cycle has a design phase where the plan is drawn out and a picture of what it will look like is presented. In the case of an app, it works the same way. This design phase tells you what your app will look like once it is developed. It also shows you the behaviour of the app when users try to interact with it. The actual design process only begins once the design is approved.

A Design Process Goes as Follows -

  • Sketching
  • Wire-framing
  • Mockup
  • Prototyping

Why Should You Have an Initial Design Process?

Consider the initial design as a blueprint of a building. You never build a building or a monument by simply putting together everything that you have. You first create a design and then give it for approval. Once it is approved, only then do you actually build it. If you start without approval, you are bound to make mistakes and it will be impossible to dismantle the building every time and start afresh. The same applies to a software development process. It is easy to make changes to a sketch or wireframe than to change the final product.

 - What is a Sketch?

A sketch is probably the simplest representation of the idea of your app. It is a simple visual representation of the app based on the ideas and inputs you have received from your clients. A sketch is just a freehand drawing on paper. It helps you visualize the information communicated to you. A sketch helps in getting a common vision of the idea presented to you.

- What is a Wireframe?

This is again a visual guide of the app but you add all the things that you couldn’t add in the sketch. A wireframe gives you a rough idea of the input, how it is processed, how the screens will be presented, how the elements will look etc. A wireframe tells you what happens when an action is taken using the app. If there is content on the screen, the wireframe gives you an idea of how that data or element will be presented in the app.

- What is a Mockup?

The wireframe shows the basic structure with the contents of the app and the functions, whereas a mockup adds design, colour, style, and typography to it. A mockup shows a realistic picture of how things will shape up in the end. The visual representation of the mockup will show what all will be covered in the final picture. At this stage, these elements can be interactive or they cannot be interactive depending on how far you go with your mockup.

- What is a Prototype?

A prototype is a final visual image of the app. The prototype acts just like the app to some extent. The code used for development is not used for creating a prototype, but it can still have clickable buttons and other components of a real app.

Conclusion

Creating a sketch is the most basic design function which can be performed even by a non-technical person. A wireframe acts as a more three-dimensional sketch. A mockup gives you a picture of the idea that you have so you can come up with better visual suggestions. A prototype is very close to the final app. Even though these words are used interchangeably, they are very different in how they work.

Do you need help with user interface design? Contact us here and reach out to our team.

Every few months, the user interface and user experience design have some or the other kind of advancements and those advancements become the most trendy thing of that year. This year, one such trend is the rounded corners. Is everybody trying to swap the sharp-cornered buttons with rounded corners?

In the past few months, rounded corners have become more of an industry standard rather than a design trend. Rounded corners have not only become common on software interfaces but also on hardware product designs. But why are rounded corners so popular? Is it true that rounded buttons have better usability? How do professional UI/UX Designers make a decision here? These are probably minuscule decisions, but they play a big part in the usability of a design.

Is it easy to recognize buttons with round corners?

It is true that rounded corners are better to look at and easy on the eyes. A simple example is of cards. When you put them in a line, it is much easier to tell the number of cards. This happens when they have rounded corners. Sharp corners will make these cards look identical and will not attract a lot of attention. The round corners act as a distinguishable edge and guide our eyes to acknowledge the visual differences. Rounded corners are also said to perform a lot better in a grid layout than sharp-cornered buttons.

Using Fully Rounded Buttons

If the interface has enough space, then the fully rounded buttons are a good choice. Spotify does this by using fully rounded green buttons on its web and mobile app. These buttons have successfully guided users on call-to-action buttons. This works for Spotify as the user experience is surrounded by play: music, podcasts etc. The primary interaction is simple and straightforward. It is extremely easy to distinguish fully-rounded buttons on albums. This will encourage the user to tap on “play”.

But fully rounded buttons won’t work when:

  1. They look like tags. When you design a fully-rounded button and make it look like a tag, it will only confuse the user. The user will not be able to decide if its a button or a filter.
  2. Displaying nested options. There is a chevron icon on a fully rounded button which will show that there are nested buttons available. This will limit the size of the chevron icon. The area to click on is pretty small. Using a semi-rounded button might work. This will act as a pop-up button. The available options will be shown upon clicking, which is much more effective. Apple doesn’t really support using rounded buttons as action buttons.
  3. Stacking. If you have a data table with 10 rows and each row has a rounded button that will make it look like a primary action button. Users will only be able to concentrate if you manage to minimize the presence of buttons.

Rounded Corners are more Aesthetically Pleasing

It is true, rounded corners look more aesthetically pleasing and also look modern. This trend of making use of fully-rounded corners in the user interface started with mobile apps and slowly went into being for the web as well. What rounded corners do really well is that they communicate optimism and openness along with providing a sense of simplicity. It all makes sense why so many design systems have recently adapted to rounded corners. Many brands and design systems have used rounded corners as icons and buttons.

Google Chrome browser was updated very recently and the first thing I noticed was the use of a fully rounded address bar. This is where Google has managed to merge the functionality with the search bar on the mobile app. A brief view of the search results will also be provided while you type even before landing on a new page. Even other updated Google apps like Calendar and Drive also have round shapes.

Wrap up

There is no right decision to be made here. Adapting rounded corners completely depends on what a brand is trying to communicate with its design. The rounded corners will only add a certain degree of simplicity and sophistication along with making the overall design more appealing and easy-to-understand. To get the right guidance on rounded corners, design trends and any UI & UX design related information, check out our Portfolio to see our work.

There are icons everywhere around us, be it smartphones or websites or software. Not only online, but even the offline world is filled with icons. Some of these icons like play, pause, and print are so common that don’t require any additional explanation.

We know exactly how they function. This is the most common aspect of a design or an icon- usability. The main objective of usability design is to help a user in achieving their objective quickly and easily.

Also Read: Basic Tips on Designing for Mobile Augmented Reality

Benefits Offered by Icons

  1. Space. Icons help in saving a lot of space. This is important especially for platforms like smartphones where the use of an icon can save some space. As it is there is limited screen space on a device like a smartphone.
  2. Recognizable. Icons are easy to recognize. Making use of common icons in a design will help the user in instantly recognizing them. This also helps largely with tasks and navigation.
  3. Touch Target. Icons are good as they make the perfect touch target. The standard icon size for any device is 1 cm by 1 cm. This can make the icon an ideal target which can be easily tapped by your finger.
  4. Universal. Icons don’t need a language, they themselves work as a language. Icons are very easily understood even if the user doesn’t understand or speak your language.
  5. Aesthetics. Icons are also more aesthetically appealing than text. A well-designed icon will definitely improve the look of a website or an app and make it more aesthetically appealing.

Common Mistakes

When there is a mistake made while designing an icon, it can affect the user experience. The biggest mistake is making an assumption that your user will understand the meaning of a particular icon. Some of the common mistakes that caused usability issues are as follows:

  • Using an icon that doesn’t convey the right meaning or using an unrelated icon.
  • Not having enough space for icons on smartphones.
  • No corresponding text labels with the icons.
  • Being way too creative and compromising the recognition aspect of the icon.
  • Not using a commonly recognized icon.
  • Adding too much graphic detail to an icon.

Types of Icons

  1. Universal Icons. There are few icons that have universal recognition and can be easily recognized by users all over the world. For example, the symbols for home or print. But these icons can have different meanings based on the interface.
  2. Icons with Conflicting Meaning. Using a commonly used pictogram will often cause trouble. These two icons compete with each other and the functionality of these icons differ from app to app.
  3. Unique icons. Icons are usually not strong visual representations and can often be bad for anything abstract.

Guidelines for Avoiding Common Mistakes

  • Familiar icons will work far better than trying to reinvent the wheel and bringing in a new icon.
  • Make use of icons in order to save space. This also improves recognition in toolbars and navigation.
  • The icons you use must be quick to recognize. Use icons that have been used before.
  • There should be no experimentation with the file type icon for file downloads.
  • An icon should always communicate something. Do not overuse it or just use it only for decoration.
  • If it takes more than 5 seconds to think of the icon you used, forget about it. It won’t work.
  • Make an icon simple and familiar as it must communicate the function and the actual purpose of the icon.
  • The space around the icon must be 1cm x 1cm for easy tapping and legibility.
  • Icons are good targets for devices with limited space.
  • The icons must be consistent and close-knit.
  • Always make use of labels for icons.
  • A user must be able to tell the use of an icon without a text label.
  • Avoid any icon that could represent multiple meanings or conflicting meanings.
  • The “heart” and “star” icons must be used carefully as they can confuse the users.
  • Make minimum use of complex shapes and graphic details.
  • The shapes and colors used must be distinct that would help the user recognize the icon.
  • Do not use similar icon for different purpose and a different icon for a similar purpose.
  • If you are ever confused, remember that the best icon is a text label.

Wrap Up

In the article above, there are tips and tricks and also UI/UX guidelines that many newcomers can go through and learn. This is important as UI/UX is one of the major and basic things in the development of an app.

The process of creating an app or a website becomes much easier with wire-frame tools at your disposal. The website mockup tools help you by breaking down the product and bringing more focus to the functions and user interactivity. This will help the clients in understanding how an app or a website will be working.

If you try to do this verbally or in writing, a lot of functions will not be explained properly. Whether it is a Progressive Web App or a Single Page Application, wire-framing is one of the most important stages in the software design process. It is not something that can be avoided at any cost.

If you are not able to explain the functions efficiently, it’s neither useful for you nor for your clients. This is why you must make use of wire-frame tools. Different tools offer different levels of functionality. Using a wire-framing tool, developers, designers, and project managers can start the design process of an app or a website in a better form with more confidence. Depending on the level of functionality of your app or website, you can choose a wire-frame tool that is more suitable to your needs.

Take a look at the following list of wire-framing tools.

1. Sketch

Sketch helps in preparing in perfectly responsive wire-frames. Sketch comes with the power and flexibility of a vector graphics editor. If you are making use of a vector-based design tool, you get to use the abilities that are of a powerful tool like Photoshop. Sketch is one of the most popular tools used by designers, specifically for those using Mac.

2. Venngage

Venngage is an online design platform that helps marketers create easy-to-edit and professional designs. Venngage also has a Poster maker that can create stunning designs. The perfect poster should be eye-catching and interesting, as well as effectively communicating your important information. There are hundreds of poster templates made by their in-house designers which makes easy for users to create engaging posters. If you're looking for a motivational poster template, a research poster template, or an event poster template, you can use the online poster maker Venngage

3. Balsamiq

Balsamiq boasts itself for being a rapid wire-framing tool. It has the ability to create the magic of making a whiteboard idea and bringing it alive on your computer screen. The sketch-style aesthetics of Balsamiq make sure that the focus is more on the content and relation. It removes distractions which can be dealt with at a later date.

4. Lucidchart

Lucidchart is very well-known diagramming software known for its mind maps and build flowcharts. It helps you build these charts with the help of a simple drag-and-drop UI. Lucidchart also works as a collaboration tool, in-editor chat, and supporting commenting.

5. Microsoft Visio

Microsoft Visio initiated as a drag-and-drop diagramming tool. Visio prides itself for having a vast library of symbols, connectors, and pre-made shapes. In addition to that, it reinforces real-time collaboration and the capability to visualize the drawings on the web. If you are working with a Microsoft-heavy technology stack, then Visio will be a natural choice for you.

5. UXPin

UXPin works as a collaboration tool and a UX design platform. In addition to helping mobile app designers, even developers and project managers can benefit from using UXPin. UXPin helps you in creating low-fidelity wire-frames, high-fidelity mockups etc with extreme ease. There is also easy integration with project management tools like Jira and Slack. It also integrates easily with design tools like Sketch and Photoshop.

6. Axure RP

In addition to creating mockups, Axure RP also lets you add functionality to the layout and draw a communicative layout. It also offers sitemap and other widget tools in the form of UI elements. The interactive mockups can be created for both apps and website. There is a built-in share function that lets you see your design on your phone.

7. InDesign CC

Indesign CC helps you in creating an interactive PDF which can work as a wireframe for your website and app. This is done by including object states and animations. InDesign CC also allows you to create libraries that consist of page elements. So creating reusable interface graphics will help is possible and much easier.

8. Photoshop CC

Photoshop doesn’t contain libraries of interface elements. But if you want to create a wire-frame in a quick and straightforward manner, then it is the best option for designers. For those who are already familiar with Adobe products, sketching out ideas is much simpler for them.

Choose the right wire-framing tool for your needs

The list mentioned in this article is just a bunch of website mock-up tools that have been vastly used and are still preferred by designers on large scale. But there are still many such mobile app design tools that haven’t been used much or explored and are at our disposal to make the most of it.

Designing and developing a user experience is not as great as data-driven UX design. The concept of UX helps us measure consumer’s interest, behavior, preference, and emotions. Using Google Heart Framework UX measurement, you can measure the emotions and attitudes of your users for a particular product or a system. User experience covers the interaction between computer systems and humans. Through this, you can know how the system is perceived, how efficient it is, and how easy it is to use the system.

Source

Do you wonder why you have a lot of visitors on your website, but not enough conversations? To know this, you need to measure the user experience of your website, or app, or the overall system. A user experience team needs to adopt useful metrics in the UX design. For this, you must consider Google’s HEART framework. Let’s take a look at Google’s HEART framework and how it can help you measure and improve the user experience.

What is Google HEART Framework?

In the routine, user experience designers have to measure user experience on a smaller scale which is comparatively easy. This way you can have a conversation with your users, get to know them, receive feedback etc. But large scales measurements which are done via automated means had no particular framework. This is where the HEART framework comes into play.

Recommended: Will 2018 be the Year of React.JS?

There are five metrics covered under the HEART framework. They are:

  • Happiness
  • Engagement
  • Adoption
  • Retention
  • Task Success

1. Happiness

Happiness is one of the major attributes of the framework and stands for the H in HEART. It evaluates and measures the behaviors, attitudes, and emotions of the users. These points are noted and collected in the form of user surveys. This attribute helps you in knowing whether the consumers or users are happy or satisfied with the product or the system. It gives an overview of how the users feel.

2. Engagement

Engagement here refers to the overall involvement of the users or the consumers with the website or the app. The engagement levels of the users can be measured using tools like the duration and intensity of the interaction, the depth, and the frequency of the involvement as well. There are many examples of describing user engagement, for example, the number of visits per day on a social networking site.

3. Adoption

Adoption is used to describe exactly how and at what rate is the new service or product is accepted by the users or the consumers. It can help you in measuring if there are any new visitors and if the old visitors have finally converted into consumers. A new product or service should be able to retain the old customers and earn new ones as well. You can measure this by the number of new accounts created.

4. Retention

Retention refers to the rate at which the old or the existing customers or users of your product and services return to get more of your services and products. This can be described as the number of users who continue to use your products or service constantly for a certain period of time.

Just concentrating on the conversion rate is not enough. It is extremely important to keep a watch on the retention rate which should only go up. The number of users or retained can tell you a lot about your products or services. Not just that, it tells you about the cost, effectiveness and, ease of use of your product or service.

5. Task Success

Task Success is a very important aspect because it considers the traditional behavioural metrics of UX. The effectiveness and efficiency, as well as the error rate of a task, is covered in it. It is more suitable for task-specific features of a product.

Improve Your User Experience With Google Heart Framework

The Google HEART framework doesn’t necessarily have to be for an entire system. It can be applied in parts and features which you feel require more assistance. It is up to you to know which of these features to use for your system. The Google HEART framework can be really useful in helping you identify any underlying problem and how to fight it. The system improves and the work becomes efficient and effective as well. Meanwhile, if you are planning to design and develop your app, contact our team of mobile app development experts, today.

Main objective of this post to give you the best example of How to work with SVG Sprites to Reduce Load Time

Compatibility: IE9+

It's an excellent way to handle images (mostly icons or similar). IMO, Its a superior way than using the icon fonts. This method also includes scaling and coloring of icons without using a different image file. But, Before I start with SVG Sprites and how to use it, I want to give a quick brief about Image Sprite & SVG.

Image Sprite

An image sprite is a logical group of multiple images put together as a single image. Using a single image instead multiple helps reduce the number of server requests and save bandwidth. With CSS we can show needed part of the sprite. I have included a quick example.

Image Used:

SVG Image

SVG stands for Scalable Vector Graphics. Its a format of vector image based on XML. Because they are scalable and don’t lose quality like rasterized images, we can use the same image for different dimension without the need for multiple images. It is also helpful for the sites which use same icon/image in various colors.

PRO TIP  SVGs are also great as a replacement of 2x sized images for the higher device-pixel-ratio.

Combining the power of Image Sprites and SVG gives us SVG Sprites. As we now know using SVG reduce the need for extra images for dimensions and color on top of that with sprites we further reduce the server request for multiple images. Let's start with creating the SVG Sprite

Creating SVG Sprite

It is so simple that you can manually do it. Here is how you should do it.

1. Open the .svg files with any text editor one by one (I prefer Sublime Text).

2. You will see some code like below for each SVG file:

The part of the code which you should copy shape(s), path(s) or whatever inside g tag here or in some case inside symbol tag.

3. Create a file svg-sprite.svg or something similar with following code template:

Notes:

34. Use the content from your each SVG files and the final code in the file should look something like the

You can alternatively use this NPM module svg-sprite

Yay! SVG Sprite is completed now and ready to be used anywhere in your web page. Now, its time to know how to use it.

Using SVG Sprite

1. You need to put your SVG Sprite code at the top of your HTML Document. Including the example to do it in php

Remember you need to inject this code at the top of the document. Also, you can use any language you want or just copy paste the final content of your sprite file.

2. To show the icon wherever you need to use the following code:

3. Additionally, you can use the CSS to style them, change color or even size

I have put together all the code and hosted it on JSBIN JS Bin - Collaborative JavaScript Debuging