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 

The Art of Meaningful UX Design

Marketers, Consumer Product developers & Sales Communities would agree that getting your customers’ captive attention and being able to influence their behavior, or decision making is probably the hardest thing to achieve in today’s world. Experts in Content Marketing or Sales Communication have highlighted the importance of ‘engaging your customers effectively’ to move them along a ‘conversion funnel’.


But how does this ‘engagement’ actually happen? What contributes to a perceptible and desired change in customer behavior? What does it take to get customers talking about your product with delight? We all know that changing behavior is not trivial. Changing consumer behavior requires getting them to take actions they don’t usually take, or are not expected to make unless they modify the basis of how they act. When a customer tries a new product or service that really doesn’t amount to ‘changed behavior’ only because a consumer may routinely try different products. That small aberration in ‘behavior’ could easily be reversed, or could evolve into a new behavior where the customer is not loyal to any brand.

Consumers Hate Change

“People hate change. They love consistency,” notes Chris Nodder in his book Evil by Design. “The posh name for this is ‘status quo bias’: the tendency to like things to stay relatively the same, and to perceive any change from the current situation as a loss. ‘Loss aversion’ leads people to overestimate potential losses from a change and underestimate the potential gains. They also tend to overvalue their current situation (the endowment effect).”
This is where Strategic Customer Experience can play a big role. Strategic Customer Experience combines knowledge from various disciplines such as Consumer Psychology, Cognitive Science, Data Analytics, Ergonomics etc to come up with the most optimized way to influence the customer choices for a given situation. Also in the recent years there have been a few postulations about ‘Experiential Models’ that result into sustained engagement and habit formation. But the most important means to achieve a real behavior change remains ‘positive emotion’ or ‘delight’ that can turn a customer into a promoter of a product by recommending it or talking about it to others.
Customer Delight creates a ‘talking point’. The power of word of mouth (and ‘word of mouse’!) is getting stronger. However, people only talk about brilliant stuff and weak stuff – they don’t tend to talk about ‘ok stuff’! The challenge therefore is to do things that gets people talking (positively!) and that’s what ‘customer delight’ is all about!

How Consumer Delight Takes Place

There are few distinct patterns in how this ‘delight’ takes place in customers’ minds. But they primarily arise out of a situation, a particular point in their overall customer journey (e.g. purchase, upgrade or evaluation etc.) when they are in an emotionally vulnerable position.
For example, imagine this scenario. A customer needs to cancel a flight booking, but it will incur a steep penalty since there is no cancellation window left. This induces anxiety. However, there is an unexpected resolution. The airline company informs the customer that the refund amount has been transferred to a wallet, and can be used for a booking in the future. As a result, the customer is relieved and raves about their experience on social media.

Nir Eyal, author of the book Hooked: How to Build Habit-Forming Products, hypothesizes that a product should be designed to facilitate a user’s need, but ultimately alleviate a symptom of a problem they have. Doing so will cause a product to be habit-forming. Habits can be good for users, and in turn good for business, because they:
·         Create higher customer lifetime value
·         Offer greater pricing flexibility
·         Supercharge growth
·         Increase loyalty
BJ Fogg, director, research and design at Stanford University where he founded the Persuasive Technology Lab, has a model showing the three elements required for any effective behavior change: Motivation, Triggers and Ability.

An integrated customer experience process within a successful customer focused organization should do all three well. Firstly, it should know when the customers are at an emotional high or low point (both could be substantial) and what behaviors do they exhibit that betray a problem or a root cause. Secondly, a sound design process takes in all the data and lays out an experience designed to provide effective triggers - ‘Call to Actions’ that communicate an outcome that would be ‘acceptable’ and ‘beneficial’ to them. Sometimes this process could be staggered. The real benefit due to the action that was taken may realize a bit late but none the less it acts as a reward and the expectation of the reward sustains the ‘engagement’. A reward that might get customers interested to invest more.

How Design Can ‘Hook’ Consumers

Eyal’s diagram for an approach called ‘Hook’, is an experience that connects the customer’s problem to a solution that intends to change a specific behavior.
But there are important differences in their approach. Fogg’s behavioral model applies equally well to actions you want to motivate, but also actions you want to avoid encouraging. Eyal focuses on just one of these four quadrants—those actions that you want to turn into habits, and habits to addiction. Ubiquitous access to the web, mobile devices encroaching our personal spaces and transferring greater amounts of personal data at faster speeds than ever before, has created a more addictive world.
Addictions are always dangerous, and they harm the user. However, habits are different. We have good habits and we have bad habits. I believe that we’re on the precipice of an age where designers can help their users create healthy habits through the technologies they use. - Nir Eyal
This is where the ‘Delight’ that results into a ‘Positive Emotion’ becomes important. Positive emotion can either reinforce or deter users from a specific behavior that results in a mutually beneficial consequence. Most ‘Customer Experience’ design efforts focus on providing an intuitive ability to perform a task well to the target customers. However, this approach takes a narrow view of the client’s real world that comprises of many adjacent emotions, attitudes, behaviors, values and belief systems.
Providing delight in a Customer Journey requires understanding multiple dimensions of the context and scenario in designing an experience that generates positive emotions at different points. Jared Spool in his article Pleasure, Flow, and Meaning - 3 Approaches to Designing for Delight, covers this in some details. Overall two principal methods differ based on how an organization plans to create a ‘space’ in the minds of its customers who are constantly enticed by the competitors with similar or better propositions:

Intentional Delight through Micro-interaction Design

Removing an obvious or known pain in the customers’ journey or making a complex task seemingly easier, are some ways to provide ‘intentional Delight’. Some companies who do it well also keep in mind that the ‘prize’ has to be ‘big’ for the intended return or outcome to be significant. Let’s look at an example. MailChimp, is an ideal balance of usefulness and delight. It fulfills a fairly technical niche, Managing Mass Mailer Campaigns, one so practical it could theoretically survive with a barebones interface. What makes MailChimp thrive is its smooth functionality wrapped in cheeky humor and visually friendly design. MailChimp transforms a dry task into an inviting experience.

Combining fun cartoons with tongue-in-cheek messages like “This is your moment of glory,” MailChimp softens the nervousness of sending your first email campaign. The actions and reactions of the interface feel less like an email marketing app and more like an empathetic instructor that understands you.
The humor and mascot are all part of the surface layer of delight. But when we dive deeper, we see that the conversational feedback and effortless task flow helps MailChimp connect with users on a more intangible level. The product instructs, entertains, and facilitates. As a result, even the most novice email marketer feels like a pro—and that’s a truly unforgettable experience.
Bottom line: never underestimate the “little things”. Micro-interactions are just not clever ways to keep the customer in good humor. They are ‘contained product moments’. Micro-interactions model can be categorized into triggers, rules, feedback, loops & modes. Triggers could be manual or system generated. Nest shows you the temperature when you approach the device; Instapaper app offers you a rotation lock if you accidentally rotate your device.
The good example of Rules is setting smart defaults with something you already know about the user. Waze suggests driving routes based on user behavior. Feedback is what helps users learn the Rules. The Temple Run game suggests ways to avoid falling and getting eaten up by the chasing beast.
Loops & modes provide a dimension (time, space etc.) of things over time. Spotify fades text for songs that have been added a long time ago.

Deeper Delight Through Meaning Making

The phrase ‘meaningful experience’ has been widely used within the digital industry, however it is often only mentioned in relation to usability and artificial delight. Nathan Shedroff, one of the pioneers of experience design, describes it as “one that reaches beyond the person’s functional, emotional and identity needs. It answers the key question of ‘Does this fit into my world?’ or conversely ‘Can this be my world?’ And if businesses focus on the meaning, and work from the centre out, the questions about price, performance, triggers and design decisions would sort out themselves”. The deeper you anchor your brand into the user’s life, the more sustainable relationship you will have and this is where the future of marketing or commercial success lies.
Products and services that build deeper connections with customers are the result of a design process infused with emotion.
The problem is that linear, or more specifically process oriented cultures like ours, the product development is viewed from a ‘prioritization’ model, where we start at the bottom and work our way up. Emotion is prioritized last, even though we may know it matters most.
Emotion is added as a superficial layer, or worse, the emotional element gets pushed to a later release to provide a branding make over. This approach makes delivering deeper level engagement hard because it separates the ‘emotional needs’ from the functional benefits of the product and therefore fails to create any ‘meaning’.
If you want to delight your customers, the real challenge is to be empathetic—put yourself in their shoes—and pay tremendous attention to the details at every step of the consumer’s journey. From the introductory communications, to the website, in the discovery/trial experience and on through the packaging, the purchase flow, and the post-sale interaction, messaging tone and voice, your view must be holistic. The insight, coming out of a deep empathy, leads you to discover the purpose, the ‘Why’ rather than ‘What’ in a product development ideation.
In his book, The Invisible Computer, Donald A. Norman notes: “I don’t want to use a computer. I don’t want to do word processing. I want to write a letter, or find out what the weather will be, or pay a bill, or play a game. I don’t want to use a computer, I want to accomplish something. I want to do something meaningful to me.”
To understand this better, we could look at some existing examples around us. And comparing two products from a similar domain makes it even more pronounced. A simple home page comparison of two car ride providers looks distinctly different. It leaves no doubt in our mind why touching emotions and creating ‘meaning’ makes such a big difference.
In the first example below, the content just functionally states about chauffeur driven transport, the service or offering.
The latter however almost self explains how it connects with its customers instantly. The content focuses on communicating the real reason why customers look for a ride. It successfully conveys that an Uber ride relieves them of driving anxiety and lets them focus on what they plan to accomplish in the day. It puts the pain of driving before an important business meeting right at the center of the experience strategy.

So then how exactly do we frame this in our design process that evokes positive emotion or delight? The first step towards this is to really know who your customers or users are, and what really matters to them, what pain they are facing and most importantly what is the purpose in their lives that a product can fit in. This exercise alone produces deep insights and provide us a way to reframe the product offering or a proposed solution differently and allow us to identify the ‘emotional needs’ a customer needs to fulfill and how the ‘solution’ would fit in it the best way possible. What helps us drive towards an iterative definition of the ‘problem’ comes from these insights and a deep and full understanding of what people ‘say’, ‘do’ and ‘feel’. Asking questions and observation of behavior go hand in hand.
After customer immersion or context studies are completed for an identified customer segment for a specific value proposition. The data is used to model the customer’s context and clearly articulate the problem that needs a ‘solution’. This ideally should happen during the early exploration-conceptualization phase of the development process. A design tool called an ‘Empathy Map’ [image above] is used here that help designers and product owners identify unarticulated emotional nuances around a problem area. This discovery is then expressed in a clear problem statement that forms the basis of solution ideation process.
In the design process, the element of emotion needs to be addressed in a careful and systematic way. The steps below could be one way of successfully capturing emotion and working with it to a proposition of ‘delight’:
1.   Identify ‘Own’able moments: Detail analysis of the customer journey reveals several points when the customer is at an emotionally vulnerable point. He could be frustrated or anxious, elated or feeling in control. These moments need to be understood deeply. The overall design of the proposed experience should address these and create a ‘meaningful’ language around them.
2.   Convey the response to the emotions in appropriate place and time: An experience that responds to the customers emotionally can do it in three ways:
·         Visceral: Appearance, Visual language, Tone or Voice
·         Behavioral: How it works, behaves, or responds
·         Reflective: How it is interpreted or understood
3.   Deliver Meaning as an Outcome: ‘Meaning’ in this context is a purpose fulfilled or an aspiration actualized. It is not a literal interaction metaphor. So it is better that we design for it and not with it. Meaning is more powerful than emotions and it transcends value.

The process of ‘Meaning Making’ through creating delight driven design intervention is tedious, iterative and should be based on continuous experimentation. But even if you are not in a position to do long gestation before the all important ‘product launch’, think of staggering it as several ‘learning launches’ or early Alpha with a limited group of potential users. And work with the learning to move forward. Most organizations lose patience right at this spot for various reasons. But the key point is to sustain thru the learning cycles and improve. To really arrive in a ‘place’ where the outcome of the design process elevates the product positioning in a way that makes it click with the users emotionally and at the same time opens doors to significantly higher engagement or behavior change, requires thorough awareness, commitment and passion.

This article originally appeared on Toptal.