Showing posts with label wireframing. Show all posts
Showing posts with label wireframing. Show all posts

Wednesday, 1 June 2022

What is Information Architecture?


  1. The art and science of structuring and classifying web sites, intranets etc. to help people find and manage information.
  2. Information architecture is concerned with creating organizational and navigational schemes that allow users to move through site content efficiently and effectively.
  3. The combination of organization, labeling, and navigation schemes within an information system.
  4. The structural design of an information space to facilitate task completion and intuitive access to content.
  5. Information architecture on the Web is closely related to the field of information retrieval: the design of systems that enable users to find information easily.
  6. Information architecture is concerned with how people cognitively process information.

Components of Information Architecture

  1. Organization systems - How you categorize and structure information. E.g. chronological, topics etc.
  2. Labeling systems - How you represent information. E.g. scientific terminology (Amend Order) or lay terminology (Edit Order)
  3. Navigation Systems - How users browse or move through information. E.g. clicking through a hierarchy, through sections etc.
  4. Search Systems - How users look for information. E.g. autosuggest, index etc.

Approaches of Information Architecture 

Information architecture requires creating categorization schemes that will correspond to business objectives for the site, user needs, and the content that will be incorporated in the site. 

UX Design



We can tackle creating such a categorization scheme in two ways: from the top down, or from the bottom up.

The elements of User Experience Design

Top-down approach - 

A top-down approach to information architecture involves creating architecture directly from understanding product objectives and user needs. We started with the broadest categories and then break these into subcategories. This hierarchy of categories and subcategories serves as the empty shell into which the content and functionality will be slotted.

Top down Information Architecture approach

Bottom-up approach - 

A Bottom up approach to information architecture involves creating architecture directly from analysis of the content and functional requirements .We group items together into low-level categories and then group those into higher-level categories, building toward a structure that reflects our product objectives and user needs.

Bottom up Information Architecture approach

Deriving information architecture – Card Sorting 

Card sorting is a method used to help design or evaluate the information architecture of a site. In a card sorting session, participants organize topics into categories that make sense to them and they may also help you label these groups. Card sorting helps us gain valuable insight about the structure of data.

There are two common card sorting techniques: 

1. Open card Sort -

In open card sorting, each participant is given a stack of cards. The participant is then asked to group those cards together any way they want. Then they make labels for the groups they created.

Open card sorting

When to Use Open Card Sorting – It’s beneficial to use open card sort when you are starting with the new project. In this way you will not introduce your own biases into the grouping of items and will see the information organized from other people’s perspectives.

Disadvantage of open card sorting – Sometimes it can be too vague as their might be many categories as participant has freedom to arrange and label the category .In this case it might be difficult to analyze the data and reached to any conclusion.

2. Closed Card Sort -

In closed card sorting, the researchers create the labels for the groups. Participants are given a stack of cards and are asked and are asked to put each card into a group.
Closed card sorting

When to Use close card sorting – If you already know what categories you want to sort items in, then closed card sorting is the obvious choice. Closed card sorting additionally removes the burden from the participants having to come up with their own group labels, which simplifies the activity for them.

Disadvantage of close card sorting – Using pre-determined group labels gives you less information because the participants’ choices are confined by the category labels you create. That, in turn, limits the chance of you seeing alternative approaches to the categorization of your items.

Using Both Open Card Sorting and Closed Card Sorting

Conducting open card sort first help you determine category names for each group of content, and to understand the different ways participant can group the items. Then, after analyzing the results, you can conduct closed card sorting to validate the interpretation of the results.

Online Tools 

Optimalsort  , User Zoom , Concept Codify, xSort , UXSort, Simple card Sort.

Check best card sorting tools> 






Share:
Continue Reading →

Tuesday, 6 April 2021

Top Alternatives of Figma - prototyping tools

Top Alternatives of Figma


InVision

Invision tool

The digital product design platform used to make the world's best customer experiences
URL: https://www.invisionapp.com/




3 Months free Interaction Design Foundation



Sketch 


Sketch tool

Sketch is a vector graphics editor for macOS developed by the Dutch company Sketch B.V. (formerly named Bohemian Coding). It was first released on 7 September 2010 and won an Apple Design Award in 2012.
URL: https://www.sketch.com/ 

Moqups


Moqups tool

Moqups is a visual collaboration tool that combines whiteboard, diagram, and design features in a single, online app.
URL: https://moqups.com/




DISCLOSURE: This post may contain affiliate links, meaning when you click the links and make a purchase, we receive a commission.

UX Design certificate by Google





Axure RP

Axure RP Tool

Axure RP is the only prototyping software that lets you quickly make rich, functional prototypes so you can make informed choices even on your most urgent projects.
URL: https://www.axure.com/

Lucidchart 


Lucidchart tool
Create flowcharts & diagrams online with Lucidchart. No download needed. Get the most powerful, professional diagram software on the market. Collaborative. Over 10,000,000+ Users. Seamless Integrations. For PC, Mac, and Linux. Intuitive. Secure & Reliable.
URL : https://www.lucidchart.com/


Balsamiq 


Balsamiq tool
With Balsamiq, anyone can design great websites. Try it for Free! Collaborate Smoothly. Rapid wireframing. One time purchase. Free Trial - Download Now. Mockups for MacOSX. Licenses tied to humans. Work Faster & Smarter.
URL: https://balsamiq.com/


Top UX Courses at Udemy


Adobe XD

Adobe XD tool

The all-in-one UX solution for designing websites, mobile apps, & more. Free! Developer handoff. Fast, versatile artboards. Smart canvas navigation. Mac and Windows.



UXPin 

UXPin tool


UXPin is not your average prototyping tool for linking static screens or artboards with transitions.
URL: https://www.uxpin.com/ 



Explore more UX Tools>> 


3 Months free Interaction Design Foundation

Share:
Continue Reading →

Thursday, 26 April 2018

The business value of UX design

What do your friend's startup, your small local business and a large company such as Google have in common? No, this isn't a trick question.

The answer is actually fairly simple and intuitive. All of the aforementioned businesses depend on users enjoying their products and services in order to continue doing business successfully.
In the recent years many have noticed the importance of UX design and are investing more and more into its research and development.

Be it physical or digital, a product is bound to rouse both an emotional and intellectual response in its consumer based not only on the way it works but also how it looks and feels. Whether that experience is going to be a good one or a bad one is going to make an effect on your sales, and this is exactly where a good UX design team proves itself to be absolutely crucial. 


Why “X” marks the spot

UX design is about two things only – the User and the Experience. Give your users a positive experience and they will reward you with their trust and their business. Companies with highly effective UX have increased their revenue  by 37%, and top 10 UX leaders in America outperform the S&P with close to triple  the returns - a significant lead.


UX EBOOK FREE


When experiencing your product leaves the user with a foul taste in their mouth, they will quickly take their business elsewhere. 90% of users reported they stopped using an app due to poor performance, and 86% deleted or uninstalled an app as a result of encountering problems with it's functionality or design. Studies show that 86% of users think that an exceptional customer experience is worth paying extra. With these figures in mind, it is not difficult to understand why user experience focused companies like Apple, Google, Adobe, Dropbox and Amazon are year after year leaders of their respectable fields.

While having a great product is paramount, in today's market it often is not enough to keep you ahead of the curve.

This is why investing into UX design has proved to be a game-changing strategy.  A pleasing UX has been proven to earn the users' interest, business, and most of all – their loyalty. 48% of users say that arriving on a business site that isn't working well on mobile will be seen as an indication of the business simply not caring, and 52% said that a bad mobile experience made them less likely to engage with a company in the future.

The principle extends beyond just mobile devices; 40% of users will abandon a web page if it takes more than three seconds to load, while 79% will search for another site to complete their task.

Designing experiences

But what about design? How important is actual aesthetic property of your website (or a product) when it comes to user experience?

An experiment conducted by M. Tractinsky tested relationships between users' perceptions of a computerized system's beauty and its usability.
Its outcome showed that, undeniably, the role the aesthetics plays in HCI design is a major one, and should be kept in mind at all times when catering to the users' needs.




It seems safe to conclude that the business value of UX design is so colossal, one can simply not afford to ignore the importance of a highly skilled team of UX designers putting their expertise into crafting the experience your users are going to undergo and enjoy while engaged with your service or product.

Engaging and connecting with the users is what every company should strive toward, and what good UX design helps you achieve. With design focused on UX, a company is forced to create for their customer. A relationship is formed and it grows, bonding the customer with the product.

References: View original link to article

About Author:

Ines Anić (@i_anic) is a Content and Administrative Associate at UX Passion, where she writes about UX, UI, design and social media management. She is passionate about UX, Usability, web design and video games; and curious about technology, gadgets, IT and the world of startups. Ines is looking forward to connecting with you on LinkedIn and Twitter!


UX EBOOK FREE

Share:
Continue Reading →

Wednesday, 6 September 2017

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.


Axure RP Prototype, wireframing tool






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.

Mockplus, wireframe, design tool

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.

Justinmind, wireframing tool

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.

invision

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.

design tool, proto.io

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.


Share:
Continue Reading →

Thursday, 23 March 2017

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
Share:
Continue Reading →

Friday, 17 March 2017

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

Share:
Continue Reading →