The designs of the local farm shop application were created using mockups of the Balsamiq desktop application. I used the built-in widgets of the graphical user interface of the wire framing application through drag-and-drop to realize the designs. The use of menus and icons has informed the design in creation of descriptive controls that are standard across different cultures. The use of list menus and select boxes provided a way to add multiple-choice contents.
I incorporated input controls such as text fields, buttons, checkboxes and date field. Moreover, navigational components such as menus, icons and search field with informational components such as message boxes, descriptive icons and notifications are also included (Usability.gov, 2018).
The designed interface was chosen because it contain menus and icons that form the shared main dashboard that helps in easy navigation throughout the entire application.
How the design meet user requirements
The design provide an interface that enables the user to register their details which facilitates authentication of the application. They allow the user to enter their custom profile details into their dashboard which displays available products such as food, wines and gifts. It also allow the user to select products into their carts then checkout. During checkout, a user can view all charges and the delivery charges as well as choose their preferred mode of payment. Moreover, after checkout, a user can select a delivery location as a point of collection of the purchased products.
Every designed page has a title that describes the contents of that current page to help the user understand the ongoing events. They also have navigational footer that has buttons to either proceed with their actions or go back hence enhancing the navigational mechanism of the application.
Every single page has a contact in the header that allow the user to inquire concerning anything pertaining the application hence achieving user satisfaction.
Factors that influenced the design
The intended purpose of the application influenced the design into an e-commerce based restaurant app. The core functions of the application to enable a user view all products and purchase the informed the process flow of the created designs.
Aesthetics in terms of color and shape of the icons and the controls facilitates user experience by providing visual aided designs. The use of common icons such as ‘add to cart’ and colored images facilitate easy recognition by the user.
The customer specifications also informed the design in order to meet the specific needs of their customers. The requirements client of the application is key in creating designs that satisfy their expectation.
Moreover ergonomics influenced the size of all components and input forms of the application (Ryan, 2009). The input form controls allow maximization of the mobile screen without clogging it. The addition of tabs allows similar categories of products to be viewed with ease. Finally a consideration of visibility to ensure that contents are readable on a mobile phone is key. Considerable contents has been added to every designed page to avoid displaying a little content or overflowing content.
Many mobile applications are composed of an authentication system that allow a new user to sign up then redirected to the login page or a registered user to login into the application. The Facebook sign up and login pages idealized the design of this application’s registration and login pages.
The Eat24 and Yelp mobile applications display all available food products with images, hence the display of small images of the food, wine and gifts in our main dashboard.
Amazon and Alibaba mobile applications have influenced the creation of the Cart and Checkout designs. They include credit/debit cards and the total charges and specification of the delivery details such as location and dates.
Reasoning behind the design
The design used different recommended principles of good human interface design hence achieving efficiency, effectiveness and user satisfaction of the application.
Navigation - The user of the mobile application should be able to navigate to a certain page in order to achieve a certain user goal easily (Babich, 2016). A good design should ensure that the user has a navigation menu at all times to go back to previous pages and to open new pages from any page. This will help the user achieve more user goals while using the application because the navigation is easy thus giving the user a satisfying experience.
Consistency – The implementation of common UI elements allow the users to be familiar with standardized icons such as add to cart, checkout, calendar and maps. The designs use a consistent pattern of controls and components with informational message of every page to achieve effectiveness.
Babich, N. (2016). Mobile UX Design: Key Principles. Retrieved from Medium: https://uxplanet.org/mobile-ux-design-key-principles-dee1a632f9e6
Ryan, V. (2009). FACTORS THAT INFLUENCE. Retrieved from TechnologyStudent: https://www.technologystudent.com/joints/prddes1.htm
Usability.gov. (2018). User Interface Design Basics. Retrieved from Usability.gov.