EventLite: From requirements to mock-ups
Part I: from requirements to mock-ups
Part I: from requirements to mock-ups
We are going to build EventLite, a web application to create, list, search and manage events that are going on in Manchester. These first requirements are a simplification of the ones to be released in the coming weeks and inform the tasks and workflow of event seekers, those people looking for an event. The requirements for the activities of event seekers in EventLite are:
- R1: Search for an event by topic/keyword/venue
- R2: Explore the search results
- R3: See a list of events for a venue, organised by date
- R4: Locate an event on a map
- R5: See a calendar of upcoming events
From requirements to mockups
We are going to use MockFlow to create the mockups. MockFlow is a browser-based commercial solution. For the purposes of this lab, the basic (and free) license will be more than enough. This means that only one project and three pages are allowed per individual. Because of this limitation, you will have to address as many requirements as you can without violating the Reduce short-term memory load guideline. Do as follows:
- You will have to create an account or you can use your Google credentials to log in.
- Once you are in, click in Default space and click on the big + sign under UI drawings
- Select a Web template
- Now check the leftmost grey bar where you can see Elements, Pages and Images.
- Elements contains the user interface elements you need.
- The project can have different Pages and this is the tree in which you can navigate between pages.
- Images contains the catalogue of pictures you may need for the project (ie. the logo of the application)
- If you are on Elements click on the blue link above the search box. You will find more User Interface elements that can be used in your project including form controls and maps.
- All works through drag & drop gestures: for instance, search the Browser frame element and place it in the working area.
- Now drag & drop another element onto the browser. While it is selected you can edit the features of the user interface element: text, colour, size. etc.
- Many UI elements are interactive:
- Elements are actionable and you can link the pages of the project by editing the Link field on the left column. This is useful if you want to do transitions between screens as a consequence of clicking on elements.
- Other UI elements such as drop-down menus will show interactive behaviours too.
- The file menu has two modalities: Edit and Review. If you want to render and simulate how elements react to the interaction you have to be in Review mode.
- Now you are ready to start and to address the requirements.
Tips
- Mockflow saves current progress from time to time. Make sure you save it too.
- You can undo and redo, and you can also revert to a previous version on Project>Revision history
Addressing User Interface Guidelines
While you create the mockups keep into account the user interface guidelines and the assessment criteria:
- The pre-conditions to get marks awarded is:
- Three screens/pages are expected
- One of them is the landing page (ie a homepage).
- All of the above 5 requirements must be implemented.
- If the above conditions are met, we will check the following principles:
- Understandability: Does an average person (which is not you) understand what is the task they have to do at first sight? Does the sequence of screens make sense?
- Dealing with consistency (strive for consistency guideline): Are the three screens consistent in terms of layout and style? Note: exceptions can be made at the homepage as this tends to differ from other pages although consistency is expected between the remaining two screens.
- Dealing with information overload (reduce short-term memory load guideline): Are you going to place all the functionalities on one screen? Are screens cluttered?
Deliverable
When you finish, you can export the mock-up through Project>Export wireframe or Ctrl+E. Submit all the pages of the generated PDF document.
