UNIVERSITY OF ENGINEERING AND TECHNOLOGY, TAXILA FACULTY OF TELECOMMUNICATION AND INFORMATION ENGINEERING SOFTWARE ENGINEERING DEPARTMENT LAB 14

Transcription

1 LAB 14 Easy Interface Prototyping with BALSAMIQ Wireframing is an important part of designing applications, but current methods can be time-consuming and expensive. Balsamiq is different. Balsamiq is an awesome interface mockup tool that will help you quickly prototype your ideas and communicate them to others. Installing Balsamiq: Step 1: Run the setup Step 2:

2 Step 3: Click on Continue

3 Step 4: Press on I Agree Step 5:

4 Step 6: Press Finish Balsamiq UI Library:

5 We will be using Balsamiq to create a simple prototype for a mobile application. Click on the File menu and select New Blank Mockup. Click the iphone tab of the UI Library, select the iphone element, and drag it onto the grid below.

6 When you click on the iphone, an options box appears. Each control in the UI Library has a set of standard options (layering, grouping, and clipboard operations) and additional options unique to that particular control. With the iphone control, we can change the orientation of the phone, select a different background pattern, or toggle the top bar. For now, let s select the second background pattern, in order to give the screen a colored bar at top.

7 Next, we ll add some typical ios interface components. Select the Pointy Button control from the iphone tab of the UI Library, and drag it onto the top bar of the iphone. After placing the control, you will have the option to edit it s text. You can change this to anything you d like, but for this tutorial, we ll keep it as Button. In the options box for the Pointy Button, you can select the direction of the button, and select an icon to be displayed on it. Here, we ve created a left-pointing button with no icon.

8 Next, we ll add an iphone Menu Control from the UI Library. The iphone Menu has many options, most of which can be activated by typing certain characters into the text field. Once you ve placed the iphone Menu, take a look at the syntax given in the menu by default to see how to reproduce a number of different menu effects. (Don t forget to put a comma between the label for the menu item, and the additional element!) For example, you can type Random Text, ON to create a menu item with the text Random Text and a toggle switch set to on. Below, I ve added three iphone menus, each with multiple items, to create a hypothetical Settings page for an iphone application. I ve also used some elements from the Markup tab of the UI Library to annotate my mockup.

9 Once you re finished, go to the Mockup menu in the top left and download your mockup as either a PDF or PNG file, and save it wherever you d like. Balsamiq offers many common UI controls, as well as elements which you can use to annotate your mockups. And Balsamiq isn t just for prototyping mobile applications it also has the ability to produce mockups for websites, web applications, and more. Explore the UI Library to see what else is available. Here are two more examples of what Balsamiq can do:

10

11 Tips & Tricks: Balsamiq supports many common keyboard shortcuts, as well as a few not so common ones. You can use Ctrl-Z and Ctrl-Y to Undo/Redo. Ctrl-C, Ctrl-V, and Ctrl-X work as expected too. Ctrl-D duplicates the current selected element. To quickly find controls from the UI Library, use the Quick Add feature at the top of the screen. Simply type the first few characters of the control you re looking for and then press enter to add it to your grid. You can show/hide Balsamiq s grid background by going to View and unchecking the Show Graph Paper option. You can group multiple elements by either Shift or Ctrl selecting them, and then selecting the Group option from the multi-element options box that pops up, or from the top menu. There are also keyboard shortcuts for this (Ctrl-G for group, and Ctrl- Shift-G for ungroup).

12 The multi-element options box (which shows up when you Shift or Ctrl select more than one element) also has alignment and spacing options that make it easy to line up multiple elements and space them evenly apart. When placing controls or other elements, Balsamiq will attempt to align them to other elements by snapping to guidelines inferred by the position of other nearby elements. If you want to show and discuss your mockup with others, you can do so from within Balsamiq by selecting View > Full Screen Presentation. This will hide everything but your mockup and give you a giant blue arrow with which to point at different parts of your mockup. Lab Task Functionalities (tasks) are displayed with icons on the homepage of the app. 1. Participants This feature allows you to see all the courses you are enrolled in, and to browse the contact information for all the users in those courses. 1. You can see photos and descriptions of all people (according to your capabilities and privacy settings etc) 2. If they have phone numbers defined, you can call them or send an SMS with a single click. 3. If they have addresses you can send them an If Moodle messaging is enabled you can also send a private message.

13 Send a message: 2. Messaging User launch Moodle app. On the Moodle app dashboard user select message icon. It should now be on the message list (or discussion list). User selects the 'new message' button. The new message screen is displayed User selects 'add contact' icon. The contact screen is displayed. On this screen all contact are listed.

14 User wants to send a message to someone who is not in user contact list. User enters name in the search bar. Searchable Moodle users are listed (small profil: fullname, username, city). User selects someone. User enters a message and sends it. Contact discussion screen is displayed and the sent message is listed.