-->

Best practices for designing Pagination in web



“Pagination is the process of dividing a document into discrete pages, either electronic pages or printed pages.” Wikipedia
Pagination are an important element in web designing. Especially in content heavy websites and applications pagination is used to divide content and present in limited & digestible manner. In this articles we are going to see some best practices for designing better pagination.

1. Pagination or lazy load? Choose wisely

IT is the first question a designer need to answer “What will work best pagination or lazy load in the given context?” Both pagination and lazy load have different benefits for better usability and user experience.

2. Place it correctly

Placement of Pagination is really important from Usability point of view. Many a times we have long vertical page in web and user tries to scroll down –down and if pagination is placed at top then user might miss it out and if pagination is only present at bottom then for going to next pages user might have to scroll page completely. For longer pages (long tables) provide pagination at both places at top and at bottom. It makes two major benefits, first is chances of missing out pagination are less and second users get flexibility to go to other pages easily.


3. Selected state and actions should be properly visible

Visibility of system status is prime important heuristic principle applied in Pagination. Current selected state and actions (Next, Previous buttons etc.) should be clearly visible to users.


4. Show first and last page upfront

Showing the last page number in pagination upfront makes it easier to know the limit of pagination for an end user. Also it can reduce to action buttons from pagination element i.e. ‘first and last page’, resulting it makes pagination component less complex.

5. Have flexible and efficient ‘Go to page’

Many a times in content heavy web applications (like finance, sales, accounting applications etc.) where number of records in table are more than 100 to 1000s. For providing ‘Ease of use’ to potential users, we should include ‘Go to Page’ element in pagination where users can directly enter or select page number and go directly to that page for viewing records.

6. Provide control to user for selecting number of records per page


Decision for finalizing number of records in table or page should be taken by end user. Potential users have their own pattern to using the system and if we are providing the decision to them then it can bring more flexibility for them. This flexibility can result in more user satisfaction and better performance.

Author


Abhishek Jain
Co-founder of UXness
UX Designer & Researcher

Benefits of using Chatbots - UX perspective



What is a Chatbot

A chatbot (also known as a talkbot, chatterbot, Bot, chatterbox, Artificial Conversational Entity) is a computer program which conducts a conversation via auditory or textual methods. Wiki

A chatbot is a service, powered by rules and sometimes artificial intelligence that you interact with via a chat interface. The service could be any number of things, ranging from functional to fun, and it could live in any major chat product (Facebook Messenger, Slack, Telegram, Text Messages, etc.). – Chatbotsmagazine 

At the moment, chat bots are basically replacing individual apps. Rather than closing Facebook Messenger and opening Uber, you can simply message Uber and ask for a ride.

Benefits of Chatbots

1. No UI approach
Chatbots are minimalist and simplistic in nature. With respect to UI components Chatbots are having simple chat box and very less UI components. In apps or websites you can find some persistent UI components which keeps grabbing your attention but in case of Chatbot very less UI components make users focused on topic.

2. Information is prime factor
Users come to platform with some motivation and intention and a system which fulfills user’s intention smoothly wins users heart. In chatbot, there is no such page to page navigation, no fancy UI components only users intentions come in form of text (message) and it is getting answered in form of response. In chatbot information is king.

3. Less distraction
Due to less UI, contextual information and one story (response) at a time to focus makes Chatbots less distractive instead of any app/website.

4. Personalized behavior
It is a key advantage of using chatbot, it can behave differently according to different users. With the help of intelligence and NPL it can identify ‘New users, savvy users etc.’ and provide responses according to context.  

5. Goal oriented platform
A well designed and intelligent chatbot gives you feeling of master. You do not need to find any option in big menus, you do not need to search information in different pages, all you need to do is just text it and bot will offer you. Your goals are prime important and you directly need to tell your goal and it will respond in efficient manner.

6. Human touch
Chatbot brings experience of human touch, which gives satisfaction, increases trust and make interaction lively. You cannot feel that you are interacting with a bot if it is well developed.

7. Platform independent design
Chatbots can run irrespective of platforms, you do need to think about android or iOS, web etc.

8. Brings delight in responses
A well designed chatbot always bring delight feeling via responses. In Chatbots responses are contextual, personalized and crafted with human touch which brings value and liveliness in interaction.

9. Better understanding of user behavior
If you want to understand behavior of your users then Chatbots are a great option. It can record all the responses and interactions of users, which can be analyzed in more effective manner.

Author

Abhishek Jain
User Experience Designer & Co-founder of UXness

How to view Axure Prototype like a Mobile app

If you are designing any mobile app in Axure then simulating prototype directly in mobile device for realistic presentation & demonstration will be really cool. In this article we are going to see how we can publish Axure prototype and view in mobile like an app.



Step1: Setup page according to targeted mobile device resolution and size. Also create global guides as per screen size and work according to guides.
Example: Guides created for iPhone 6s resolution (647x375px). Reduce the height by 20px in iOS app for status bar.



Step 2: Complete prototyping work and keep all the elements inside the guide.

Step 3: Publish prototype with some modifications
a.       Include View Port tag
b.      Set targeted device
c.       Screen width
d.      Add app-icon
Go to Publish> Generate html > Mobile/Device.



Step 4: Upload prototype in Axure Cloud (Axshare) and generate the link ‘Without sidebar'.


Step 5: Open the prototype link in targeted mobile device using default browser and ‘Add link to Home’. With this step, you can find an app icon in Menu of mobile as app.


Step 6: Tap on the app icon from Mobile menu and experience the prototype link an app.

We will be seeing some more articles related to Axure prototyping tool. Keep sharing your feedback/comments and suggestions of new topics.

Read more 'How to Axure' articles.

Author

Abhishek Jain
Co-founder of UXness
UX Designer & Researcher

When to use Variables in Axure


Axure provides capability to invoke information and triggers with the help of variables. Variables in Axure are less similar to the variables which developers use but are more simple. Learning how to use variables in Axure is not important, important is answering when and why first. Using variables in Axure is good when a designer is having a good understanding and maturity in design prototypes in Axure.



When to use Variables:

To show more ‘Personal’ feeling or Human touch Personal and human touch provides more realistic feeling for user. If user’s name/role etc. (in text format) are coming in one screen (form) and user moves to another page by submitting the form then instead of showing generic message, you can show more personalized message as user has submitted the data in previous form.


Moving data from one page to another – If you are working on dashboard or data heavy application where user enters some data and you want to move entered data in another screens then we can use variables and reduce some elements from Axure workspace.


Reducing panels in dynamic panel and hidden stats – If you have different panels in a DP just to show variation in text, then you can use variables and move the respective text value in one.
Example: In any app, you have one ‘List of record’ where each record is having unique ‘record number or record name’. On click of any record you open a page which contains record number/name along with details. Now showing different record you might create different pages which will be quite laborious. With the help of variable only 2 pages will be able to show List and details page with all record numbers.

In upcoming article I will be talking about how to use variables in Axure.
Share your feedback on this article.

Author

Abhishek Jain
User Experience Designer & Researcher

Step-by-Step Guide: Become an Excellent Interaction Designer

In recent years, with the rise of the Internet industry, designer quickly became a popular profession. The thriving designer career trends attract more people to join in the industry; especially the excellent designers are hot needed. According to the different job descriptions, designers are divided into several categories, such as interaction designers, visual designers, user experience designers, web designers and so on. Today, our protagonist is the interaction designer.

What is Interaction Design?

The interaction design was put forward by the founder of IDEO, Bill Mogridi, in 1984. At the beginning, it’s called Softface, and then renamed "Interaction Design", that is what we called the interaction design today. An interaction designer is a profession that focuses on the interaction mechanism between product and the user. That means with the help of interaction designer, it will allow users to use the product simpler and easier, experience the product more intuitively, and ultimately feel the value of the product.


In the process of interaction design, designers will be responsible for creating compelling pages and UI by the consideration of logical operation and thoughtful action. A successful interaction designer is the one who good at using technology and good interaction rules to create an ideal user experience.

The Composition of Interaction Design

Bob Baxley divided the interaction design into 5 parts in his "Introducing of Interaction Design":

Human/machine communication - the transmission and translation of information between equipment and users.

Operation and feedback - this requires the designer to understand and anticipate how interactions unfold over time, designing for the wide range of permutations that can occur.

Status - the presence of a different state to ensure users understand what is happening, and why the application gets into this state.

Workflow - let the user understand who can do what, and what will happen next.

Failure - failure is bound to occur, it must be considered within.


Abilities of Interaction Designers Needed

User research
Product (concept / function) design
Interactive Design
Visual design
Engineering technology

From the point of the current trend, interaction designers should have composite skills, not only to produce prototypes/wireframes with Axure or Mockplus. The interaction designer is a character across design, development, creative and marketing teams. He will help with these teams to build design strategies, establish key interactions for products, create the concept for prototyping test, maintain technical updates, and ensure that products keep up with the latest trends.



How to Become a Good Designer

In this so intense competition environment,have you still keeping the attitude of “Let things drift if they do not affect one personally”? The time what you only care about your own world has passed. What the interaction designers should keep in mind has been more than the basic concept of the “design”. The excellent interaction designers are standing in the user’s position to analyze problems. They know how to bring the user role into the design that can create the excellent works. Here are 4 tips for your reference.

1.Write a blog. Communicate stories with design, express emotions with stories.
2.Communicate with the users. Understand the interaction and preferences of users.
3.Communicate with peers. The power of sharing is infinite.
4.Learn some coding knowledge. Jump out your limited thinking.



Goal: to Become a Knowledgeable and Specialized High-End Designer.

If you understand the concept of the designer and know better about prototyping tools than others, such as the popular Axure, Mockplus and etc, that will much helpful to be a good designer. Moreover, with a good combination of tools and theories, your promotion will be not far away, won’t you? It’s bound to be along way to become a professional designer, just be patient, and you will gain what you want.

Original Posted at: https://www.mockplus.com


About Author

Grace Jia
Email: grace@jongde.com 

A Closer Look at Eye Tracking - Infographic


Eye tracking is the process of measuring either the point of gaze (where one is looking) or the motion of an eye relative to the head. An eye tracker is a device for measuring eye positions and eye movement. Eye trackers are used in research on the visual system, in psychology, in psycholinguistics, marketing, as an input device for human-computer interaction, and in product design. Wiki



Below is an infographic prepared by iMotions, which describes detailed information about Eye tracking in very interesting and summarized manner.


How to Embed Fonts in Axure prototypes


While working in different kind of operating systems (like iOS, android) or client’s designers have some constraints of using any specific ‘Font-family’. iOS have its own default font family, sometimes client companies have their own style guide for using default fonts. If you are designing prototype in Axure then knowledge of fonts is recommended for you and how to embed any specific font family in your prototype is required for seamless experience. In this article you can have step by step guide in ‘Embedding custom font family in Axure prototype’.

Step 1. Select font which you want to embed in Axure prototype. Let’s say we want to embed ‘Open Sans’ font family.

Step 2. Get the ‘Source URL’ of font from ‘Google free fonts’ of similar other sources.
Google fonts: https://fonts.google.com/ 
Search – Font name and Select. Once you select you will be able to get link of font (see below image).





Step 3. Now open Axure prototype and go to Publish> Generate html.




Step 4. Select ‘Web fonts’ tab and add font by clicking on ‘+’ icon below.



Step 5. Enter the Font name (keep font name exact same with source URL). Enter URL of web font, keep ‘Link to .css file’ as selected.
 Till yet we have done linking of our custom font in our prototype. Now we have to map fonts which we are using in prototype to this (open sans) font. 



Step 6. Go to ‘Font Mappings’ and click on ‘+’ to add new mapping. Select any font which you want to change in your custom font in ‘Font’ field and enter exact name of custom font family in ‘font-family’. Let’s say we want to replace all the text having ‘Arial’ font in to our font (open sans).



Step 7. And finally generate prototype and run. You will be able to view your custom font in prototype.

Let me know your views on this article and also share more topics for 'Axure' prototype.

About Author
Abhishek Jain
twitter - @uxdabhi

UXClub - My three critical values of collaborative design

Plenty of companies preach it’s value and plenty more companies pretend that they practice it.

The Collaborative Design technique is a crucial part to the success of any product team and it’s vital that you get it right. When I say “Collaborative design”, I am strictly referring to the symbiotic relationship between the Product Manager and the UX Designer.

In this post I’d like to share with you the three critical values that I have found to be truly useful in forming a solid collaborative relationship.

1. Not wasting everyone’s time


The first and arguably the most significant is not wasting everyone’s time. This could mean your time, your team’s time or your company’s time.

Your time is precious and it’s expensive.

A recent experience of my own highlighted this point enormously. For discretion sake I won’t name the company in question, I’ll refer to them simply as Company X.

Company X had recently developed a new and improved platform and wanted to migrate all of it’s users onto this new platform as hastily as possible.

Depending on the customer that migration might take longer as they may of been using more sophisticated features that we had not ported across to the new platform. Nevertheless, the overarching theme from Senior Management was to get these customers migrated as quickly as possible so we could start making more money out of them. (yey!)

One feature in particular (Feature Y) was holding up a few hundred customers. We had major problems with this feature in the past. It was slow, not very user friendly and we regularly had support tickets being raised because of this.

The logical thing to do here would be to analyse that user research and test something we think would be better - learning from our mistakes and working collaboratively as a team to get better results.

No.

Not in this case. We were all told to to simply copy what we had and get this through the door as quickly as possible.

Once the feature had been released onto the new platform we saw a 15% drop in customer usage and a vast increase in support tickets raised.

MASSIVE FAIL

At no point in that project did we work collaboratively or listen to one another. There was no testing, no dialogue, no benchmarking, no data analysis, nothing.

The feature is now being re-developed (again). A massive waste in time and resource.


2. Product validation


Product validation can mean a multitude of different things. It can mean validation to the company, an individual or a certain part of the team.

Working together collaboratively shares the vision of the product with multiple stakeholders and get’s everyone singing from the same hymn sheet.

If a product fails or doesn’t perform as well as hoped then it’s easy to start pointing fingers at people and holding them accountable.

Sharing what you’re trying to achieve with each other is a great way to get people invested into the collaborative process and validate your product decisions.


3. A happier team built on trust not predication


Working collaboratively may be hard if you haven’t got the right personalities on your team in the first place.

To get the most out of this technique requires trust on both sides.

“Do I trust the designer to design something that meets the requirements?”

“Do I trust the Product Manager that we are building the right thing?”

Both UX Designers and Product Managers share scarily similar goals in a company. They both work extremely close with the product and they both have a massive say on what it is going to look like.

That is why it is pivotal to establish a relationship between theses two roles.

A good tip to help establish who does what is a checklist. It’s something I’ve recently trialled in my team and it has gone done very well. The checklist doesn’t have to be anything fancy - just a simple list of tasks that need to be completed before and during any project and who is responsible which. Once that task is completed it is signed off - together.

Sounds dead simple but it helps set the ground rules before any work begins. Everyone knows where their responsibilities lie and it will help solve friction further down the line.

A modern PM/UX Designer

You’ll come across plenty of characters in the workplace. Some of which would much rather do everything on their own if given the opportunity.

These are the types of Product Managers/Designers I like to call, traditional workers. There mentality stretches as far as “What do we need to do?” and not “Are we building the right thing for our users”.

To breach this space into a modern Product Manager or UX Designer you will need the help of the other. It’s a synergy that is perfectly crafted to help the business succeed and is one that you must get right.

Good luck!

About Author
Ed Vinicombe
Ed is the founder of UXClub.com, an on demand video learning platform for UX Designers.
ed@uxclub.com