AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |
Back to Blog
Sketch ui browser bar12/21/2023 ![]() On both the website and the app, we confirmed that the colour schemed we used were colour blind accessible using the resource below. The Checkup page is now accessed through a notification rather than from the navigation bar. We removed the Publish page in the Figma at the request of our project partner. We also narrowed down the number of pages to 4: Once we had become more familiar with the requirements, we added a series of introduction pages to gather setup information and introduce the user to the app. The design of the app has changed since making the UI Figma, technically and visually. We distributed the UI Figma to potential users and received the feedback that the UI was not clustered, the buttons were clear, the colours were pleasing to look at and the pages were easy to navigate to. Using a slider to rate wellbeing (from sketch 4) Highlighted icon for the selected page (from 2 and 3) Horizontal Navigation Bar Menu at the bottom of the page (from sketch 2)ĭescriptive menu icons (resembling sketch 6) In all these designs, the idea was to keep the menu identical on every page to maintain the Consistency principle.Īt the top of this page is our final UI Figma, which implements the most successful parts of our sketches: The vague identical nature of the menu buttons makes this extremely difficult. The menu design in sketch 3 suffers from a lack of Mapping as the circular buttons feature requires the user to remember which number in the slideshow maps to each page. Some other design principles we kept in mind whilst evaluating these sketches include Mapping and Consistency. However, we simplified it to a rating out of 10 as these were our Moscow requirements. The slider in sketch 4 makes it very clear to the user that they should rate their well-being, so we kept the idea of a slider and the minimum number of features, text, and simple menu placement. We did not proceed with any home page layout choices from sketch 3. The page is too cluttered to understand the purpose of this page. Sketch 3 (above) does not contain this Simplicity or Visibility. Consequently, we proceeded with simple menu placement: at the bottom of the page with descriptive icons. The icons in sketch 6 are much more descriptive. Therefore, regardless of which icon is selected, it is not clear which page is open. The menu design, however, in sketches 2 and 3 suffer from a lack of Visibility and Feedback, as the menu icons are identical and do not describe which page they correspond to.Due to the pages' simplicity, it is evident that the buttons are page menu despite there not being a ‘Menu’ label. The menu placement on these pages is ordinary.This makes it obvious what should be done on the home page - a Wellbeing Checkup (because at the time, we did not know that users should access the checkup through a notification). Sketches 2, 4 and 6 (above) maintain Simplicity and Visibility as they keep the number of features and the amount of text to a minimum. This is not ideal as it violates the Affordance principle: the home page is not the most critical or interactive page_ but these layouts present it as if it is the most important. These are good for feedback but require more taps to navigate away from the home page than a navigation bar. In 5, the page icons open a labelled window placed on top of the home page, which can be closed using an x button, and in 4, a drop-down menu opens text buttons with the selected page button highlighted.However, they also suffer from Visibility and Affordance issues. The menu design of sketches 1, 4, 5 (and maybe 6) (all shown above) implement the principle of Feedback well, as the selected page is made clear from the state of the icons. ![]() ![]() Within these sketches, we primarily focused on implementing the Design Principles of Visibility, Feedback and Mapping. Using these, we chose the best features from each to create the UI Figma. We evaluated these sketches using the design principles laid out in the HCI lectures. These sketches acted as a medium to experiment with the placement of the menu and the home page layout. These initially were pencil on paper, but they have been copied digitally for this website as the features weren’t very clear on the sketches. We began the UI design process by making six rough sketches.
0 Comments
Read More
Leave a Reply. |