Question

Building on your initial user interface (UI) design mock-up of the organization’s program UI, the interface now needs to present more information to the user. Complete the following for this assignment: The interface should present information visually with icons or graphics and text regarding critical issues related to the system, such as the following: New orders Change in employee status Updated pictures New products or services offered Describe techniques for developing prototypes of user interfaces. You must add at least 5 critical issue UI design items to your interface. Remember to ensure that these are easily understood by users. Submit a screenshot in Word or another functional application. Describe the items that you added to your interface design. Be specific with your descriptions, and identify the particular design features along with an explanation of why they are added in the way that they were .

Answer 1

1). ANSWER :

GIVENTHAT :

In designing any prototype model for any software application, it’s always good to follow a model. Below suggests a flowchart to follow so that the prototype comes out as expected. The stages are

1. Requirements gathering: This involves understanding the requirements of the user and the system to be designed. This can be achieved via several methods like conducting questionnaires, interviews etc. and eventually coming up with a Software Requirements Specification (SRS).
2. Prototype Design: It is always a good habit to sketch and design the interfaces on a piece of paper or any graphic software to have an idea of how the interface would look like. This not only saves time for the developer to design but also if any changes are to be made, can be discussed with the team and adhered accordingly. One can a simple application like MS paint or even draw on a piece of paper.
3. Build Prototype: The next step is actually building the prototype. One has to be very careful when developing the prototype, constant communication has to be there with the project manager as to what to develop. Some users want the prototype just to be a graphical representation of how the actual application would look like, while some users want navigation options while some users want some actual functions. Depending on the particular need, the prototype should be build, this not only saves time but makes it efficient.
4. Test Prototype: The next stop involves testing the prototype. SRS may be referred to design the test cases and testing may be performed whether the prototype satisfies all the requirements. This can be achieved by the testing team before actually letting the user come and check first hand. This improves credibility.
5. Prototype Cycle: Once if all the test results are approved and the client is satisfied with the prototype, the team can now proceed with the planning of the actual development. However, if the requirements are not met the above steps can be performed again to render all the changes necessary

Now let’s look at what we have in our hand. What we have here is a system that is interactive and the main objectives are the following modules

1. New Orders
2. Change in employee status
3. Updated Pictures
4. New Products or Services

1. New Orders: This would be the module where in the customer make orders, select options, can make payment and generate the order receipt. One good option when selecting icons or pictures is to always go for standard icons, for example instead of downloading images from google as your icon, I would prefer to use bootstrap icons. Some critical points to be kept in mind while designing this interface are:
   1. Making sure the icons is something relevant to a new order. I cannot select a house icon to represent the New Orders icon. I would use an icon like,

1. 1. Captions: It is a good practise to put a caption over the icon so that the user knows what he/she is browsing over. A small caption can be put over the new order icon like “New Order”.
   2. Text and Size: Always use visible and clearly readable text and make sure that the icons fit the interface perfectly, do not have an icon that is too large or too small.
   3. Options: Ensure that the user has all the required options that he/she can select. For example, if an order is made on a shoe, the interface should allow the user to select
      1. The shoe size
      2. The Shoe colour
      3. Quantity
      4. Brand
      5. Types of Shoes
      6. Men/Women/Child
   4. Navigation: Another critical issue is that the user should be easily able to navigate across the application. From the new orders tab to home page to any other page with ease.
2. Change in Employee Status: This is something the administration would be responsible for, a change in the employee status is not something that is to be reflected to the public users. Keeping that in mind for easy understanding and efficient communication, the following options are critical.
   1. New Employee Status: Indication to represent a new employee joining the organization
   2. Retired Employee Status: Indication to represent retirement of employees
   3. Leave/Absent Status: Indication to represent which employees are absent.
   4. Employee performance Status: Indication to represent a employee performance( generally a red coloration or indication, yellow to represent warning and green to represent good employees)
3. Updated Pictures: A good way to indicate that an individual has uploaded a new picture is to provide a notification if a new photo has been uploaded or updated. This notification should however be selectable and flexible. Users should be able to select to whom the notification may be send or who wants the notification. Another way to indicate is to highlight a small new/updated caption whenever a photo has been updated, this caption can be set a timer for 24 hours or 48 hours. The caption can be kept forever or for long, if the caption is kept for 5 months after the photo has been updated, it would make no sense
4. New Products or Services: This module is user centric, this means that it is intended for the users, to advertise, to attract new and old customers about new features being added. Care should be taken to highlight this, for instance whenever a user logs in, I could have a small notification or indication in the home page describing about the new product or service. Another way is if I have uploaded a new service, let us say only one new service and I have added an icon for it, it is a good practise to put a caption just above the icon like “new”, this gives a hint to the user about a new addition.

Some other critical issues while designing any UI are:

1. Too many icons and space within the application all spaced out. This leaves the user with a non-friendly environment.
2. Background: Always choose a background colour or image that is soothing to the eyes.
3. Performance: Don’t make the application full of icons or images that it may degrade the performance.
4. Headers and footers: Avoiding using too large headers or footers.
5. Follow design standards: Ensure that the textbox, search options, dropdowns etc. are all on the design standard. Do not make it too large or too small
6. Responsiveness: Ensure that your application is responsive over different platforms and screen sizes, for instance your application should fit automatically to an iphone, a tablet or a laptop.