Part A: Prototype
Before initiating the design of the prototype, it was critical to understand the focus group results. The focus group outcomes were a simplified, convenient, and visually appealing prototype. The prototype principles used were customized to the group’s requirements. The main categories obtainable at Mike’s Restaurant are showcased on the home page. They include appetizers, children’s meals, and main dishes. The wireframe design simplified prototyping by incorporating the uniform correctness principle. The linked menu items were positioned on their page. How to navigate through the website pages was illustrated using arrows to indicate the flow.
Link: https://invis.io/Z711OXNYJG6P
Part B: Design Justification
My food online ordering system prototype is based on Mike’s Restaurant. During the design phase, the primary aim is to create an online ordering system that is quick and easy for any user and directs them towards the ultimate objective: ordering and enjoying meals from Mike’s Restaurant. The application of user interface design principles is essential to create an effective online ordering system.
Structure of Each Page
Each page’s design structure makes use of large, clean pictures. The pictures are spaced evenly and make excellent use of white space. A top-down approach to navigation facilitates left-to-right reading. With repeated exposure to the scheduled events, perceptual patterns in the layout produce habituation. The pages have appropriate information separation to minimize clutter and focus on defining aspects. Moreover, the position of links and toggles is coherent and provides the same capabilities across various pages. Each page’s design is linked to the user’s objectives and effectively maps to pertinent data.
Navigation controls
Navigation is crucial to the flow of design, interaction, and data-flow organization. It is never a good idea to leave a user puzzled about how to use a website. The logo, menu bar, and footer are all shared by all of the web pages. It is critical to ensure consistency for the user so that they are fully conscious of which page they are on and have not navigated away. The navigation buttons and supporting links are well-placed and showcase concise and clear classifications. The horizontal navigation bars are consistently placed on all relevant sections in a good layout that customers can instantly pinpoint, memorize, and execute. The prototype’s links are informative, with primary and secondary allure, and in a logical sequence.
Colors
The prototype’s colors are easily identified and register substantially with perception channels. There is comprehensive utilization of various shades of maroon. In the specific instance of this prototype, the maroon color represents intense and passionate aspects such as confidence, imaginative thoughts, enthusiasm, passion, love, ambition, courage, strength, warmth, and beauty exhibited by the restaurant. The limited of other colors detract from this layout cue.
Font Styles and Sizes
Three fonts are used in the prototype’s font selection. Arial is used for sub-titles, Arial font is used for descriptions and page titles. Arial is a soft font with several humanist characteristics. Moreover, the font is extremely adaptable and has a significant presence for the showcase. It brings a touch of class and elegance to the site layout while preserving the conventional typeface value. The Arial font was selected to add a decorative touch and to position a separator for title recognition. The font sizes are adequately staggered, and the visual hierarchy is appealing.
User Controls
This prototype’s controls are sizable (with accessibility in mind) and easily accessible. Horizontal markings are fully operational and are placed at the top and bottom of each linked page, offering comfort and control to the user. Fixed footers are used to enable quick interaction with interoperability options that function within the control mix. With proper spacing and positioning of icons and logos, proper functionality is prevalent. With huge, high-resolution photographs and picture icons that anticipate a functional response, the graphics are enticing. With an intuitive interface design, all projected search fields are prevalent.
Use of Text or Instructions
The website content is the most significant because it differentiates it from others. A badly placed text will conceal the message, dampen search engine results, and misguide users. A perplexed user is inclined to look elsewhere. Because of this, the text should convey the appropriate message and visual elements. This prototype gives adequate instruction, accessibility options, and connected text that remains on message. There are alternatives to connect with the restaurant’s social media platforms and message convey sentiment with the appropriate weight, font sizes, messaging, and placement principles.
Conclusion
The presented prototype validates and describes the design strategy and objectives used to form the prototype design. It involves discussing the human factors, other implications of layout, interaction, and consequences of these choices for the online ordering system. The concepts and tools were carefully chosen with mental ergonomics and a principled engaging strategy in mind. The exercise facilitated an evaluation and test, addressed production problems, justified my design, and got closer to a final product to meet customers’ needs.
