What is a Full Stack Designer in 2017? Will You Be One?

Compared to the Full Stack Designer, we seem to be more familiar with the Full Stack Developers. So what is full stack designer exactly? Can we simply think he/she is a versatile designer?

In the past, designers and developers have a clear role assignment. They rarely do the both at the same time. While with the changes in product design and the evolution of team collaboration, many web designers are able to manage web developing and UX design at present.

So there comes a question: what’s the character of the so-called full stack designer? He/She is only a designer? Also coding while being a designer? Or he/she is a designer as well as a web developer?

What is a Full Stack Designer?

In fact, the concept of Full Stack Developer came out earlier than the Full Stack Designer. But full stack does not mean to do all. Specifically, it refers to a person who masters muti-skills and he can use them to independently complete a design or product development.

That means that a truly full stack designer can build a basic conception of a project, and complete the whole design and development related works. Such as the wireframes/prototypes design, visual design, and the front coding, JS / jQuery, etc.




The Emergence

The come out of the full stack designer is not accidental according to the current situation. With the outbreak of mobile Apps and the arrival of the entrepreneurship tide, there are many small development teams who cannot set full positions. That forced the team members to play multiple characters in one position. You can always see the developers not only coding but also build prototypes with the prototyping tools (Mockplus,AxureProto.io)

The Advantages

Comprehensive thinking is the biggest advantage of the full stack designers. A designer who is familiar with the product development and design process, he knows the limitation of product design. So that he can clearly control the expectation of the product design. Familiarity with the process can make the team more convenient to understand the development, marketing, and user experience details. This will make cooperation more seamless, reduce rework and unexpected situations.



The Importance

The full stack designer can analyze and customize his own "skill tree" according to his own situation. He can clearly know the structure of the product, the progress of design and development process. He is a multi-skill person who can use user experience, design patterns, techniques, and tools to complete the product development. And then, the whole progress will be more systematically, and the product will be better.

Focusing on the whole program, that is the most obvious difference between the normal designers and the full stack designer. If you are one of them, it will undoubtedly add a great value to your team. And if you are a freelance designer, it is necessary to be a full stack designer.



What Makes a Great Full Stack Designer?

However, it’s not a requirement for full stack designers to master anything perfectly. Taking the web design as an example, you will understand well about their roles:

Assist the product manager

Complete the pre-concept for the entire project, brainstorming, mood boards, basic planning

Prototype design

Wireframes, visual draft, low/high fidelity prototypes

User research

User experience

Test

Front-end development

HTML, CSS, JS, etc.

The handover with the programmer

Understand the interface and the development of the deep demand, how the front-end code will be more matching backend and the program.

Conclusion

To become a good full stack designer, you are destined to keep learning and enrich your skill-tree. But please note that you should choose a right industry and direction to follow up the design trend and technology, new pattern, and new tools.

Original post: What is a Full Stack Designer in 2017? Will You Be One?

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