Friday, 11 November 2016

What's special in Axure Prototyping tool?



Prototyping is one of the most important activity for UX designers which generally done on paper sketches to digital softwares. There are lot of wireframing and prototyping softwares and applications available. Each one is having some special qualities or offerings for designers. In this article we are going to discuss how 'Axure' prototyping tool is different for prototyping, how UX designers and interaction designers can get benefitted.



1. Create wireframe to prototype with Interactivity
One can create low fidelity wireframes to high fidelity functioning prototypes in axure with adding interactions. Axure provides a great set of interactions which one can use and create awesome prototypes.

2. Test prototypes like an app on mobile
If you are designing any mobile application, then view prototype like an opening app directly from mobile. This helps in experiencing the prototype in more realistic manner. Good for testing and analysis.

3. Adaptive prototyping
For designing responsive and adaptive applications, designers need not to create 3 difference prototypes of different resolution. Axure provides responsive prototyping by which in single prototype we can create different screen layouts.


4. Storing & sharing on cloud
Axure provides file storage & sharing on cloud also. So no need to worry from where you are working, you can get your prototype files and links everywhere.
Link: https://share.axure.com/

5. Amazing social collaborated community for learning
One of the most amazing thing about Axure is not any feature in tool, it is their support social community. Social collaborated community portal of Axure is very rich crowd sourced learning platform where designers who are learning the tool or having any difficulty come & get solutions by different designers.
Link: http://www.axure.com/c/forum.php


6. Designer friendly updates
Axure team is working hard in understanding the designers need and helping in their design process very aggressively. From first version to Axure to latest version they have added, updated lot of features and made more designer friendly.

About Author
Abhishek Jain (@uxdabhi)


Sunday, 6 November 2016

Best Books of 2016 Recommended by Mockplus for UX Designers


Here comes a list of the 6 best and most influential books compiled by Mockplus on UX design to help both new-comers and experienced designers strengthen their skills. If you can carefully read and digest these must-read books, I believe you will get advanced in user experience design without any doubt. To identity and select a good book, just look how many revised editions that book has. From personal benchmark, the more revised editions a book has, the better its content is. Now, let’s scroll down and get inspired together! 

Authored by Steve Krug


This book is an introductory book for UI design beginners. In addition, it is the most recommended book on the usability. The core idea of book is "Do not let me think!"

Author Steve Krug summed up the intuitive navigation and design principles around usability laws and cited many negative examples. This book is very interesting and easy-to-understand with numerous illustrations, even if the most boring design principles.

Authored by Don Norman


This is a must-read book which is regarded as a classic for experienced designers and a primer for beginners even if they don’t have any design education background. This book will open the door to a new world of design and teach people how to observe it in a completely new perspective. After reading this book, people will find out that design is present everywhere, no matter good or bad. A classic book can stand the test of time. It has over 20 years since this book was published, but the core design idea mentioned in the book is never out of date.


Authored by Alan Cooper


As an old book published 12 years ago, The Inmates Are Running the Asylum remains to be a masterpiece and is a perfect fit for product designers and UX designers with programming background.

Alan Cooper, the book author,is titled as the father of VB and Interaction Design, with awards of Microsoft Windows Pioneer and Software Visionary. He established the Cooper Interactive Design company, dedicating to creating user-centric application software. He has a programming background but is more than a engineer.

Combined with hands-on experience and smooth writing, this book includes sharp perspective to point directly to the pain, making you feel hooked and keep this book accompanied always. Of course, some people may think it unbaised.

Authored by Tim Brown


The author is Tim Brown - the CEO of IDEO which is one of the world's greatest design consulting firm. This book introduces us about “Design Thinking”, the original design is not only about aesthetic style, but also a process of thinking, a way of working. Design Thing is a kind of practical philosophy which is user-centric and gives consideration to technical feasibility and commercial viability.

Design is thinking, observation, insight and empathy. It is not only relying on the designers’ individual creativity, but also the creation of innovative products or the people from different disciplines (product managers, engineers and designers). There is no standard answer for what is design thinking, but the most valuable things are the creative process and what it produces.

Authored by Nir Eyal


How to get users became addicted to your product is a question that every product manager needs to ask himself. This book proposes to create a "add-on" model to increase user loyalty in four steps (including Triggers, Actions, Variable Returns, and Investments) by creating links through "internal triggering" to lead users develop the habit of reusing the product. If you are engaged in consumer products, be sure to read this book.

Authored by Janice (Ginny) Redish


This is a book on web content and layout design and layout. It offers excellent strategies and solutions on what can be the best content form and how to present the information in the best way.

Authored by Jake Knapp


SPRINT is Google's original product design process, taking only 5 days to test a product idea and user feedback. It’s the most practical and efficient work method, using prototyping and user testing to solve the crucial problems. If an adventurous product idea could succeed in the design sprint, then the rewards will be greater in real practice. Even in the design of the sprint stage, the defeat is also pretty valuable—because only 5 days to test out the key shortages of the product is rather efficient enough.

If you have other classic books worth recommending please come to the Mockplus Community and share with us.

You may also like:

About Author
Berry Sarah
Mockplus Team

Saturday, 22 October 2016

Top 5 Desktop & Website Based Prototyping Tools

Working in the design industry, you are inevitably to do some prototypes, of course, that is also inseparable from a variety of tools. A handy tool makes a handy man. Good prototype software can greatly improve your efficiency, but each tool has its own advantages and disadvantages. There is a list of prototyping tools/apps based on browser, PC, and mobile devices. In order to better help you make the right judgments, and less detours, today I will introduce the product features of some commonly used prototyping tools.

1. Axure RP

Despite the variety of prototyping tools whose functionality and usability are constantly developing in recent years, but Axure is still the ace among these prototyping tools. It’s a very good prototyping design software on Windows, also the first choice for predesign work.




Price:
Free 30-day trial.
Pro: $289 per license
Team: $589 per license
Enterprise: $99/month

Features:
1. Renowned prototyping tool with large user population.
2. Rich video tutorials with multi-language.
3. Built-in widgets and a huge library of third-party widgets.
4. Good for making interactive prototype with complex interaction.
5. Professional training and support documentation.

Preview:
Directly press F5 to preview online, or preview via mobile device:
Export the project to HTML, and then open in Safari;
Open the uploaded project from PC through Axshare.

Export:
Support for export file types: HTML, DOCX, PNG

2. Mockplus

As an emerging rapid prototyping tool, Mockplus provides a large number of components and icons, and it’s user-friendly design helps users starting design quickly. The interaction design in Mockplus is fully visualized, that's WYSIWYG. It allows your to add page link and interaction for components with simple drag-and-drop. Simple, convenient visualization operation greatly simplifies the interaction design, also improving the work efficiency.


Price:
Free trail
Monthly subscription: $20
Yearly subscription:$119

Features:
1. Low learning curve, easy to learn for a first-time user.
2. Easy-to-use drag and drop, prototyping is fast.
3. A huge standard library of components (200) and vector icons (26,00).
4. Interaction design is visualized, adding interactivity to individual elements with simple drag and drop.
5. Comprehensive ways to preview and share your project: export to HTML, export to demo package, export to images, export project tree, publish to cloud and scan QR code.

Preview:
1. Press F5
2. Export to HTML5 view online
3. Export to HTML5 offline package
4. Export to demo package
5. Preview on mobile device by inputting view code
6. Scan QR code
7. Export to image
8. Export project tree

Export:
Support for export file types:.exe, PNG, HTML, Project tree (Mind Map, Tree View, HTML, MarkDown, XML, Text)

3. Justinmind

JustinMind is mainly focusing on high-fidelity prototyping. Compared with other interactive prototyping tools, Justinmind is more suitable for mobile device (iOS & Android) prototypes. If you want to create a complex high-fidelity prototype, you can try it.


Price:
Free 30-day trial.
Pro: $29/month (billed yearly: $19/month)

Features:
1. Gesture interaction
2. Custom components and libraries
3. Rich interactions and animations
4. Conditions and variables
5. Team prototyping and version control

Preview:
1. Preview online
2. Preview on device

Export:
Support for export file types: HTML + JS, Word, PNG, Navigation map

4. Invision

InVision is a web-based interactive prototyping tool. It can easily achieve a very good collaboration between team members, gather feedback to help designers quickly design product models, manage design teams, and online collaboration assistance. The static pages, mobile app wireframe can be quickly turn into clickable, interactive prototypes.


Price:
Free - 1 prototype
Starter - $15/month, 3 prototypes
Professional - $25/month, unlimited prototypes
Team - $99/month, unlimited prototypes
Enterprise - Unlimited prototypes, plus advanced features

Features:
1. Easy to learn.
2. Quick and intuitive to add screens and create hotspots.
3. Support for gestures and transitions.
4. Sharing and commenting system are good for collecting feedback.

Preview:
Via browser on PC or mobile devices

Share:
Prototypes can be share through URL, Email, SMS, etc., you can also download the ZIP prototype package or PDF

5. Proto.io

Proto.io is a very powerful web app with a lot of features. However, it needs to set by dragging and dropping of each step, click the button, and adjust the value in the options. Sometimes it’s a bit difficult to find some of the settings you need.


Price:
Free 15-day trail.
Freelancer: $29/month, 1 user, 5 active projects
Startup: $49/month, 2 users, 10 active projects
Agency: $99/month, 5 users, 15 active projects
Corporate: $199/month, 10 users, 30 active projects

Features:
1. A huge standard library of components.
2. Support for adding interactivity to individual elements.
3. Support for importing designs from Dropbox.
4. Support for Sketch and Photoshop plugins.

Preview:
Preview through HTML or send SMS to mobile

Export:
Support for export file types: HTML, PNG, PDF


Original Post at Mockplus.com.

You may also interested in:

Sunday, 2 October 2016

A Rapid Mockup, Wireframe & UX Prototyping Tool for Designers


The process of wireframing can be totally non-tech stage of any app or web development, requiring only a skeletal outline of essential elements, such as header, navigation, content and footer area, to illustrate any possible interaction from a user. With that said, it’s the utmost important, yet underused, stage of any given project.

There are more avenues than ever to sketch a wireframe, even most notably pen and paper (the most cost-effective and easiest way), but for the sake of this article we have focused on a new-born yet feature-rich tool - Mockplus, with every aspect of the product covered in details. Let’s read on and prototype away!  

An Overview of Mockplus

As a relatively new player in the prototyping field, Mockplus has emerged as a real stand out thus far with a smart team from the orient supported. Instead of overemphasizing on functionalities, this agile design tool does give user experience the highest priority, making sure anyone of every level can prototype faster, smarter and easier. It’s user-centric interaction and highly-intuitive interface have gained an increasing number of global customers.      


Specifications & Feature Highlights

Though some people may prefer to go vanilla and create prototypes by hand using paper and pen, one thing that UX designer or researcher have in common is they keep looking out for new technologies. No one would like to use sophisticated tool if he/she can achieve it by a simple alternative. Following are some highlighted features of Mockplus that may take your design process to the next level with least efforts.

1. Fully Visualized Interaction

Interaction design focuses on creating engaging interface with well thought out behaviors. It is drag-and-drop based at Mockplus, which means you can build interactive prototypes in a totally visualized way, with no calculation or repetitive selection required. As shown, the Link Point on each component is all about setting up interactive components and a link between pages, no matter in-page or cross page.

Let’s say we need to make a movable picture when the “Adjust” button is clicked. Just click on the button component and then drag the link point to the needed picture. Once done, a dialog window will appear on the screen to prompt you to define a command for your component. In this case, we choose “Move” and press “OK”. 

2. Ready-made Components

Pre-designed and readily available components will obviously reduce the overall design time and greatly improve quality. At Mockplus, there are over 200 ready-made components specifically designed to fit both mobile and web apps, making interactive design as time-efficient as possible. The newly-added components include pop-up panel, image carousel, stack panel, scroll box and sliding drawer, etc.   
 
Taking the “Scroll Box” as an example, you can achieve scrolling for a web prototype by simple drag-and-drop. Also, there is another effective way to set scrolling for mobile prototype with header and footer area fixed. This tutorial illustrates how it works. 

3. New Features Wrapped in V2.19

Like many other tools on the market, Mockplus keeps improving and evolving rather rapidly, with a cool set of new features added in each update. As for the upcoming version 2.19, there are four spotlights that you should never miss out:

A. Around 3000 vector-based icons. A total of 3000 icons will be available for free use, with 2500+ vector icons and 400 flat icons included. All of the new icons are high-quality and support proportionally scale.

B. Auto-recovery option. This type of interactive command allows you restore the original interaction after the first interaction occurs. With that said, only one touch of the button can revert back to your original interaction.

C. Export to project tree. You have a high-level view of page flows and choose to export to various file forms, ranging from Tree View, Mind Map, to CSV (opened in Excel), Text as well as XML.

D. Copy text from demo package. The ability to copy all or only the selected text from the demo package by dragging marquee on the prototype page. It’s a time-saver for UI designers and developers.

4. Selectable “Wireframe” & “Sketch” Style

When rendering your design, you can decide on a style for the mockup. The Wireframe style adopts geometrically reduced shapes, while the Sketch style takes on a hand-drawn outlook. Mockplus allows you to switch between the two styles with ease.  

5. Multiple Choices to Preview on Any Device

Not only does Mockplus let designers quickly make interactive prototypes of their mobile, desktop or web apps, but also offers a fluid view of prototypes on any device, in a web browser or on a mobile device using the Mockplus app for iOS and Android.

In the case that you need to make a mobile demo for completed sketches, there are two flexible ways to choose: one way is by scanning the generated QR code, another way is by publishing to the cloud. Undoubtedly, such a device preview will give you instant feedback of how a layout works on different screens.  

Pricing Policy & Exclusive Offer

The pricing of Mockplus is “Pay as you go” with a monthly or annually plan to enjoy rapid prototyping on mobile, web and desktop platform. The monthly subscription is priced at $20/mo, but there will be an exclusive 50% discount
for yearly plan which costs $119 only. The “Group Purchase” is meant to anyone who needs three or more copies of this software for team use, offering up to 40% discount without tied contract.  


If you happen to be a student, teacher or educator who is engaged in UI/UX design or other software design training related positions, you can get FREE trial of Mockplus Pro version. Submit your request and they will be back in touch soon.

Technical & Documentation Support

It’s always important to have reliable technical and documentation support to guide your work. Instead of leaving customers in stranded and helpless, Mockplus treats every user as they treat their own family with efficiency and professionalism. It has been praised for responsive and informative support since the first inception.    



For regular users who want to address their minor issues independently, they can search and find documentation articles from Tutorials page. Plus there is a series of YouTube videos awaiting for your discovery.     

How about Customer Satisfaction?

Customer reviews are an increasingly important part of the purchase journey, providing the kind of mass exposure that you might never be able to find via traditional channels. Based on collected online reviews, a majority of people are satisfied with Mockplus service and product, with little negative remarks yet to discover.

Ari Arturo Velázquez Fierro, an interaction designer, said “I have used the tool and I love the idea that making screen view through QR code. I’m really satisfied with what I see and even start recommending it at the office to some of my colleagues. I love this app and it is super easy-to-use I must say”.

Shalaka Bhagwat, a freelancing journalist & content creator said “I love what I see at Mockplus, a rapid prototyping tool that offers template designs for various app components, making it so convenient for the end user, especially if they are keen on investing their time in working on other stuff that goes into making an app: the logistics, the market survey and communication”.




Perhaps the biggest downside of Mockplus is the lack of HTML file format, which won’t be available until mid-August. Also, it is a non-web-based tool (in consideration of the project file security) and may take some time for advanced features, such as adaptive design.   

Closing Notes - The Choice of Rapid Prototyping & Wireframing

As there are too many tools focusing on functionality instead of usability, the presence of Mockplus is like breathing fresh air with the ease of making ideas visible in an instant. Also, the user-friendly pricing and well-informed support make it an excellent choice for rapid prototyping and wireframing. For more details, just visit www.mockplus.com




About Author

Berry Sarah


Email: bleachmizu@gmail.com

Saturday, 1 October 2016

How to Get Started in UX/UI Design?

As most UX designers may tell you, there is no prescribed path to becoming a UX designer. Some designers may start with degrees in arts, others were trained in architecture school, while some even came from entirely different professions. Not a few designers have been broken into this field without any formal training, with a genuine empathy for others and the belief of making lives better through design.

However, it’s not easy to land an entry-level UX position, and many new-comers may get lost by the interchangeability of design terms, like UX and UI. So before diving deeper into starting a career in UX, let’s take a quick look at the two different terms in below.        

 What Is UX/UI Design?


At the very start, let’s define UX & UI design before moving on to our point: 

UX Design (User Experience Design) - is all about enhancing user satisfaction and designing the complete user experience. UX requests a solid understanding of sociology, psychology as well as design to identify and address the real user problems. Also it requires tactical skills, including concept iteration, user research, prototyping and usability testing. One of the most critical skills for UX designers would be communication.
 UI Design (User Interface Design) - is all about selecting the right interface elements, such as text fields, buttons, check boxes and drop-down lists, to create the tangible interfaces that users can readily understand and easily use. In small-sized companies, UI designers may conduct the entire process from user flows to hi-fidelity mockups; In large-sized companies, they are likely to specialize more in defining the layout of an app or website (that’s what we call “Sketch” or “Wireframing”).  



The ultimate goal of UX and UI design is making the user’s interaction as time efficient and simple as possible. Also the lines between UX and UI designers are always blurred in accordance with different company size and demands. For more information about frequently confused design terms, like UX, UI, IA, IxD, here is another post for your read.

 How to Become a UX Designer?


There is no need to repeat others’ career path, and below are some practical advices for those who are thinking of stepping into UX design industry.

1. Get Yourself Educated

This does nott mean you have to go invest in a university degree, but a formalized education won’t hurt. There are may higher education UX courses and programs out there, while it’s not a necessary step to break into the UX field. Just as one UX expert put: “If you are a ‘lifelong learner’, in other words, if you are paying attention, you will be able to take previous experience and apply lessons learned from them to your new situation. That is more important to me than specific skills you might learn in school.”



Here is a comprehensive list of recommended ebooks, which would form a good starting point. On a more informal level, you can take participation in various online courses, and following are some recommendable learning resources.

General Assembly - They specialize in today’s most in-demand skills, offering a complete program in UX design. It’s possible to take different kinds of workshops and classes, as well as attend as a part-time or full-time student. 

 DesignLab An authorized design program that would pair students with experienced mentors. Their courses vary between 4-6 weeks and charge around $300.

Udemy - As a competitor to Lynda, their pre-course pricing makes it a great supplement to designer’s education. There are some free pre-introductory courses there.

Lynda All courses on the site have good reputation, requiring you to subscribe before accessing them. There is a 10-day free trial and the pricing goes from $25/mo.

Fundamentals of UX Design - It’s coming from Tuts Web Design, consisting of sixteen 2-hour lessons at the fee of $15.

UX Apprentice - Cost-free courses and learning resources for anyone who is looking to learn the basics.


Aside from articles and online courses, you can also engage in design communities, ranging from visual design websites like Behance and Dribbble, to more comprehensive websites, like UX Magazine. Being a part of a community will make self-learning less intimidating and you can get inspired by others’ creative ideas. More websites and blog resources to get you educated. 

2. Take Advantage of the Right Tools

Since you have learned the fundamentals, you still need to practice your knowledge under real environment. UX design is not just working in front of a screen, and you have to be taught how to create interactive wireframes and conduct usability testing sessions. Both require software to achieve. Considering of ease-of-use and included features, here are the most recommended tools:

 Axure


Established in May 2002, Axure is considered as the standard in interactive wireframe software and recommended for professional designers looking for sophisticated prototyping capabilities. It does help user experience professionals, product manager and business analyst as well, but is far from an ideal choice for beginners for its steep learning curve.



 Justinmind


As a flexible prototyping tool, Justinmind supports multi-platforms and can work well for simple click-through prototypes or complex interactions. The device-specific templates and gesture-based interaction set it apart from other tools. However, the free version is somehow  limiting and its moderate learning curve still keeps many first-time users away. 



 Balsamiq


Founded by a former senior engineer of Adobe in 2008, Balsamiq has appeared to be one of the best wireframing program providers in the industry. As is advertised “Life is too short for bad software”, Balsamiq Mockup allows simple elements and fast design creation for websites & mobile apps. It may have a top limit on the quality of created mockups and the lack of template window is another downside.



InVision


InVision is a US-based company that takes many useful customization and import options from Marvel, with more collaboration features included. A highlight is you can share completed mockups through the in-built LiveShare tool, which is more effective than sending a .PDF file. While this viewer app is only compatible with iOS devices like iPhone and iPad, with no support for Android and Windows Phone. 



Mockplus


Developed by a team of passionate developers from the orient, Mockplus is a relatively new player in the industry. It’s a rapid prototyping tool to turn design ideas into functional prototypes faster, smarter and easier. It’s visualized interactions and drag-and-drop UI largely simplify the design process and keep designer focused on the graphic quality and content. Live preview can be achieved by scanning QR code and the most recent 2.19 version will add 3000 vector icons. Its educational offer is awaiting for fresh minds.  



Beyond any doubt, there will be other alternatives on the market, with both pluses and minuses existing the same time. For those who are in need of testing and analytic tools, here are the recommendations:


A/B Testing Tools, which aim to help test one or multiple elements on certain page to see which received the most action. These types of tools can be purchased on monthly basis. Some popular choices are A/B Test MasterIntuitionUsabilityTools
Web Analytics Tools, which give you better understanding of website traffic and visitor behavior from both optimization and conversion perspective. Google Analytics is my tool of choice.
User Feedback Tools, which enable you to gather user information and feedback. Some general tools include Mechanical TurkUsabilityHub and Ethnio.


   
3. Find Yourself a Mentorship

Mentoring is rewarding, and a high-quality mentorship can be an important part of a designer’s growth process. You don’t need to catch up as often with a potential mentor, but try to soak up everything that an experienced UX designer can offer you when talking on Skype or taking a quick coffee.


It may be daunting to find a mentor as UX professionals are always busy, but you may find a mentor through some communities you join or some courses you take. Take a look at this article on how to find your design mentor and also consider whether you want to pay for a mentorship service. It’s true that almost anyone you respect can serve as design mentor, and just talk to everyone you can and be open to different opinions.   

4. Get Some Experience & Hired

No one can become a successful UX designer without building things. Almost every UX designer starts with some jobs to practice their skills. That’s where online portfolio comes in handy. Just like a UI designer would have an A3 portfolio that shows posters, logos as well as t-shirts designed by himself, you need to present examples of your created deliverables.


It’s great to propose an apprenticeship or internship at a company, and your portfolio will be a great help that tells a story about the process you follow will be a great help. Generally, the more you’ve learned, the more opportunities will open up for you. This could be a virtuous cycle in which you can learn and grow. 

 Bottom Line


At last, here’s a quote written by Ivan Glass to share with all people who have been planning or just wondering to break into the UX world. Enjoy the ride!

"Nobody tells this to people who are beginners, I wish someone told me. All of us who do creative work, we get into it because we have good taste. But there is this gap. For the first couple years you make stuff, it’s just not that good. It’s trying to be good, it has potential, but it’s not. But your taste, the thing that got you into the game, is still killer. And your taste is why your work disappoints you. A lot of people never get past this phase, they quit. Most people I know who do interesting, creative work went through years of this. We know our work doesn’t have this special thing that we want it to have. We all go through this. And if you are just starting out or you are still in this phase, you gotta know its normal and the most important thing you can do is do a lot of work."
Please comment below if you have any further thoughts or suggestions to share. 

About Author

Berry Sarah
Email: bleachmizu@gmail.com