My own-nifty-ux-guide

My own-nifty-ux-guide

• 1.
  My Own NiftyUX reference Sachin Joshi [email protected] Understanding Requirements Identify Targeted user Identify User Goals Identify Market Competition Identify Constraints Build Scenarios Information Architecture Design Workflow Wireframes Seek User feedback Enhance Wireframes Visual Design High fidelity UI Understand the proposed solution and the problem which the solution aims to solve. Gather as much as possible information about the placement of the product/solution in the market and potential opportunity after success.
• 2.
  My Own NiftyUX reference Sachin Joshi [email protected] Understanding Requirements Identify Targeted user Identify User Goals Identify Market Competition Identify Constraints Build Scenarios Information Architecture Design Workflow Wireframes Seek User feedback Enhance Wireframes Visual Design High fidelity UI The solution is designed to address some particular functions that it offers to its user. There are several user factors that can affect on the design of the solution. • Age of the User • User exposure to computers/devices/gadgets • User’s familiarity with similar product / applications • Satisfaction index of the competitor product • Criticality of the solution to its user (Is it a Vitamin or Pain killer type solution) • What is user’s general mental state when using the application? • What outcome user expects when accomplishing the task/s.
• 3.
  My Own NiftyUX reference Sachin Joshi [email protected] Understanding Requirements Identify Targeted user Identify User Goals Identify Market Competition Identify Constraints Build Scenarios Information Architecture Design Workflow Wireframes Seek User feedback Enhance Wireframes Visual Design High fidelity UI To make the performance of the application measurable, the task performance can be measured on the following heads, this help in accessing the solution on various level of assess- ment during and after the development. • Speed • Accuracy • Success rate • Satisfaction
• 4.
  My Own NiftyUX reference Sachin Joshi [email protected] Understanding Requirements Identify Targeted user Identify User Goals Identify Market Competition Identify Constraints Build Scenarios Information Architecture Design Workflow Wireframes Seek User feedback Enhance Wireframes Visual Design High fidelity UI Find any other products offering solution in the same space. • What is the user rating of that product • What is the market share of that product • What are the strengths of that product • What are the weakness of the product
• 5.
  My Own NiftyUX reference Sachin Joshi [email protected] Understanding Requirements Identify Targeted user Identify User Goals Identify Market Competition Identify Constraints Build Scenarios Information Architecture Design Workflow Wireframes Seek User feedback Enhance Wireframes Visual Design High fidelity UI Identify constraints that can affect on the design under appropriate following heads. • Technology Constraints • Users Physical Constraints • Environmental Constraints • User IQ Constraints
• 6.
  My Own NiftyUX reference Sachin Joshi [email protected] Understanding Requirements Identify Targeted user Identify User Goals Identify Market Competition Identify Constraints Build Scenarios Information Architecture Design Workflow Wireframes Seek User feedback Enhance Wireframes Visual Design High fidelity UI Build task scenarios based on the most common paradigm in which user is going to perform the task. Try to make them as realistic as possible.
• 7.
  My Own NiftyUX reference Sachin Joshi [email protected] Understanding Requirements Identify Targeted user Identify User Goals Identify Market Competition Identify Constraints Build Scenarios Information Architecture Design Workflow Wireframes Seek User feedback Enhance Wireframes Visual Design High fidelity UI Create groups of task that can sound most logical to the user. You can do this by conducting card sorting from identified model users. Based on analysis of the previous items, scenarios, build a priority index of each task based on following parameters. • Importance / Criticality • Frequency of usage Give appropriate Labels and Titles which are commonly used by the targeted audience. In appropriate labels and titles can mislead the user. Refer to the commonly use jargons to come up with precise labels. • Feedback of task accomplishment shall be given to user as clear as possible. • It is important to keep user informed about the current state of the task. • The task flow should account for any unforeseen failures, in which user is provided with appropriate alternative actions. • Appropriate messages that conveys the state of the task clearly. It is preferred to have a round of feedback from user after this.
• 8.
  My Own NiftyUX reference Sachin Joshi [email protected] Understanding Requirements Identify Targeted user Identify User Goals Identify Market Competition Identify Constraints Build Scenarios Information Architecture Design Workflow Wireframes Seek User feedback Enhance Wireframes Visual Design High fidelity UI • Create workflows of various crucial tasks • The workflow needs to identify any possible roadblocks and alternative actions while performing a task.
• 9.
  My Own NiftyUX reference Sachin Joshi [email protected] Understanding Requirements Identify Targeted user Identify User Goals Identify Market Competition Identify Constraints Build Scenarios Information Architecture Design Workflow Wireframes Seek User feedback Enhance Wireframes Visual Design High fidelity UI Design wireframes that simulates the content placement based on the points analyzed so far. The wireframes should also take the size, resolution of the device. Many times, it is preferable to design the home page at the end, but it can change on case by case basis.
• 10.
  My Own NiftyUX reference Sachin Joshi [email protected] Understanding Requirements Identify Targeted user Identify User Goals Identify Market Competition Identify Constraints Build Scenarios Information Architecture Design Workflow Wireframes Seek User feedback Enhance Wireframes Visual Design High fidelity UI You can have as many rounds of user feedback during this process. This will help build system that matches the user mental model.
• 11.
  My Own NiftyUX reference Sachin Joshi [email protected] Understanding Requirements Identify Targeted user Identify User Goals Identify Market Competition Identify Constraints Build Scenarios Information Architecture Design Workflow Wireframes Seek User feedback Enhance Wireframes Visual Design High fidelity UI You may find that there is a change required in some of the elements in the wireframe based on the user feedback. It is preferred to get it done to its best extent.
• 12.
  My Own NiftyUX reference Sachin Joshi [email protected] Understanding Requirements Identify Targeted user Identify User Goals Identify Market Competition Identify Constraints Build Scenarios Information Architecture Design Workflow Wireframes Seek User feedback Enhance Wireframes Visual Design High fidelity UI Visual design plays a major role in adding expression to the user experience it delivers. This phase accounts for the social traits that influence the meanings of color, symbolism. The overall meaningfulness of the User interface is decided by the visual design and its elements. It is essential to have a round of feedback from users after visual design. Things that are not translated correctly by the users are to be recorded and iterated further. Many times all the users will not have the same perception from the UI, in that case a logical majority can be considered as go ahead.
• 13.
  My Own NiftyUX reference Sachin Joshi [email protected] Understanding Requirements Identify Targeted user Identify User Goals Identify Market Competition Identify Constraints Build Scenarios Information Architecture Design Workflow Wireframes Seek User feedback Enhance Wireframes Visual Design High fidelity UI Development In ideal scenario, when the UI development is started, it should have all the expectation set from the developed UI. Before starting the development please verify all the information about the screen sizes, responsiveness, and alternative layout for mobile and other supported devices. This will let you decide the UI development strategy and over- all scope of development. This helps develop a frontend code that is scalable and easy to maintain. Choose appropriate UI frameworks if that gives you more than 50% of the behavior as per your expectation. Sometime it is even preferable to not to use any framework and write your own for better maintainability.