Lesson Creating a Prototype - Software Engineering - ثالث ثانوي
1. Software Engineering
2. Prototyping
3. Developing Applications with App Inventor
4. Software Accessibility and Digital Inclusion
Lesson 3 Creating a Prototype Link to digital lesson www.ien.edu.sa System Design The system design stage comes directly after the analysis stage, during which the system elements, components, and system interfaces are identified, and this in turn includes planning for several things such as system architecture, hardware components, operating systems, programming, integration with other systems, and system security issues. The Main Operations of the Design Phase The processes in the design phase revolve around what the system (interfaces) and works (functions) will look like. Some parts of this phase focus on the technical features of the system while other parts focus on how the system responds and interacts with the user. Other Operations Involved During the Design Phase • . Designing screen-based inputs, which includes designing how data enters the system, such as through text boxes, drop-down lists, forms, and so on. • Designing User-Interface layouts, which includes how system menus, web pages, or applications will look. It is often useful to use organization charts to design this part. • Designing system reports, which includes the process of designing system outputs such as usage reports, summaries, statistical data, invoices, or any type of printed report. • Designing screen-based outputs, including screen outputs and system reports such as search results, error messages, or any type of report that appears only on the screen. . Designing data structures to store data, including designing how data is stored in databases and tables. • Designing rules for validating inputs and verifying data includes how to prevent incorrect or corrupt data from being entered into the system and how to validate it. وزارة التعليم Ministry of Education 2024-1446 000 /, 95
System Design
The Main Operations of the Design Phase
Other Operations Involved During the Design Phase
Now that you have gotten to know the concept of UI and UX and gotten acquainted with the operating systems of smartphones, you are ready to create an application for users with special needs. First you need to design the prototype of the application, and in this tutorial, you will create this model using the Pencil Project tool. Prototype A prototype is a model that simulates the product we want to create, and since designers want to fully define and understand how users will interact with the product to test it, they build a prototype, as it is not feasible to produce a final product and then have it tested by users. Prototyping is designed to enable designers to think about their solutions differently, to reduce the cost of failure and to avoid investing time and money in an idea that may not be suitable. The Importance of the Prototype Prototyping helps focus on the basic functions of the application and gives an idea about the look and feel of the product to benefit the customer in making a right decision about the appropriateness of these elements. Table 2.4: Why is the prototype important? Better understanding of design content. Not only does prototyping provide a solid visualization of the design to understand the look and feel of the final product, but it also helps the team better understand why they are creating their design, what they are designing and for whom. Facilitates the process of obtaining feedback. Using prototypes, you can gather feedback from stakeholders at every stage of product development, whether adding new features or redesigning parts of the product, testing what works for them and what doesn't according to the specific objectives of the application in progress. Validate modifications before development. Prototyping allows for multiple discussions regarding changes to work before entering the final development phase. This process facilitates the adoption of appropriate changes and ensures that realistic requirements are built that meet the application objective. Early changes save time and cost. Early changes help you achieve your goals faster. Making adjustments in the final stages is expensive and may require radical restructuring and more thought and reformulation. Having a ready-made prototype enables us to make needed changes early before investing a lot of time and effort into creating the final product. وزارة التعليم Ministry of Education 96 2024-1446
Prototype
The Importance of the Prototype
Prototyping Categories There are different approaches to modeling, and you should always select the right one that works with your product and the resources available for the work. Prototyping methods are generally classified based on their accuracy into the low-fidelity category, the medium-fidelity category, and the high-fidelity category. Low-Fidelity Prototype > This model is usually created using paper in the initial stages of design and is constantly refined throughout the process. > It helps to make changes easily and quickly, as it focuses more on how the system is used rather than what it looks like. > As the product becomes more complex it is difficult to keep the low fidelity model in the development cycle, making paper prototypes ineffective in keeping up with the required depth of design. Medium-Fidelity Prototype > A model that is created to simulate and represent system functions, even limited ones, based on specific usage scenarios. > This model is best for the intermediate stages of product development when moving from a low fidelity prototype to a medium fidelity prototype. High-Fidelity Prototype > This model is often confused with the final product because of the similarity between them in appearance, and the effectiveness of some system functions in the model. High-resolution models are the best in giving a realistic experience similar to the product with actual functions. > It is characterized by accuracy in estimating the required cost and time. > Supports the analysis of more complex parts of the product in advanced stages, as showing this model in the initial stages of modeling may confuse the stakeholders and not provide the necessary ....preliminary knowledge. A Figure 2.20: Low-Fidelity prototypes Figure 2.21: Medium-Fidelity prototypes LOREM IPSUM AENEAN AUGUE pam, sed do e NAM COMMODO Aenean eu na sed est carn M DI LOREM IPSUM LOREM IPSUM LOREM IPSUM rem ipsum & a jam fermentum DI teger ligula nunc & Login a & am fermentum Д Remember Me nean bibendum & Send LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM Lorem ipsum & ☑ ŵ a Etiam fermentum 11 Login Donec a MORBI LEO Remember Me Fusce elect Send A Integer ligula nunc & NAM COMMODO Los dolor sit amer, camac Д Sed ut pe mcova clamos, an Alle est cursun dapun sed sed Etiam fermentum Д Curabitur D7 ☆ parate is ded tur laoreet eletr Morbi va dur sit am Aenean bibendum Д A al A ° وزارة التعليم Ministry of Education 2024-1446 Figure 2.22: High-fidelity prototypes 97
Prototyping Categories
Low-Fidelity Prototype
Medium-Fidelity Prototype
High-Fidelity Prototype
Modeling Instructions Proper prototyping is important to validate design solutions for our project, so let's go over some tips to keep in mind when working with prototyping: • Invest time in creating the template and don't go into too much detail. • Always remember product goals while working • Consider the user first. Application Scenario Not all users have the same needs, that's why applications must take into account these differences and modify their user interface and functionality. We are going to create an application to help tourists navigate through the screen so that they can read information about the different tourist spots that they can visit in the cities of Riyadh and Jeddah. The Low-fidelity Prototype for our accessible tourism application would look like this: 1 The first screen of the application consists of an image and two buttons so that the user can press the first button that connects the user to the next screen and the second button to change the language from English to Arabic. 2 The second screen of the app consists of two images so that the user can choose the city he wants. The images also work as a button that connects the user with the next screen. 3 The third screen displays a list with two highlights of each city, each one works as a button to move on to the next screen. 4 The last screen displays an image and a simple description about the highlight وزارة التعليم Ministry of Education 98 2024-1446 www
Modeling Instructions
Application Scenario
The Low-fidelity Prototype for our accessible tourism application would look like this:
Creating the Prototype with the Pencil Project Software Pencil Project provides an open source graphical user interface (GUI) for prototyping for all platforms. In the previous lesson, we used Pencil Project to create a flowchart. In this lesson, we will create a Medium fidelity Prototype for a mobile application. To create a new prototype: > Open Pencil Project and click Create a New Document. 1 > From the Shapes panel, click Mobile - Android ICS to add a shape. 2 > Drag and drop the Phone shape to the canvas. 3 > Drag and drop the Status Bar shape to the top of the phone screen as it looks in a real phone. 4) > From the Shapes panel, click the Common Shapes section to add the shape. ⑤ > Drag and drop a Bitmap Image onto the canvas to load an image. 6 Pencil =PENCIL 0x Sha... My... Clip... Search for shapes Common Shapes Common Shapes Collection of general 。 shapes Abc Basic Web Elements A mundu deltannito abscid Plain Text Rich Text Desktop- GTK Widgets Rectangle Rectang Vo Desktop- Sketchy GUI Gradient Oval 田 Rectangle Desktop- Windows وزارة التعليم Ministry of Education 2024-1446 Ml. Dannk 1 Open a Document... Create a New Document T Select objects in the canvas to edit properties. Properties 99
Creating the Prototype with the Pencil Project Software
d document - Pencil Unsaved de She PENCIL Search for shapes 2 Moble Angroid ICT . 3 Mobile Android 12:00 4 3 Abc وزارة التعليم Ministry of Education 100 2024-1446 ume Unsaved document Untitled Page *Unsaved document-Pencil 5 PENCIL Comman Stapes Common Shapes Abc 曲 6 Abc a No Image Unsaved document Untitled Page Place the phone shape to the left of the canvas to make room for the rest of the shapes. 12:00 Figure 2.23: Creating a new prototype with Pencil 200 207 Restore D ropemes
Figure 2.23: Creating a new prototype with Pencil
To insert an image: > Right click on the bitmap shape and select Action then Load Embedded Image. > Choose the image file. 2 1 > Click Open to upload the image from your device. > Drag and drop the image to the middle of the image outline to fit the phone screen. 4 Unsaved document Pencil =PENCIL Sha Search for shapes Comman Abc ☑O Select Image Common Shapes ADC E 12:00 m Undio: Drag Binmap image Arrangement Ctri-Z With Shadow Action □ Locked Delete Add to My Collections. To Original Size Correct Ratio by Widths Delete Correct Ratio by Height Load Linked Image Load Embedded Image 1 Cut Ctrl- Convert to ebedded Copy Cel-C Edit with Et mal Editor Paste Ctrl-V Select All Chri-A Export selection as PNG Col-Alt- Resice Canvas Saing Policy 200 222 PENCIL Background Restore D Propenies Search for stupes × Commun Common Shapes 12:00 Shape OneDrive - Personal > Pictures Search Pictures Organize New folder Attachments Desktop Documents Music Pictures KSA_flag.jpg This PC وزارة التعليم Ministry of Education 2024-1446 3D Objects Desktop Documents Downloads Music Pictures File name: KSA flag.jpg 2 田 All F 3 Open Cancel Figure 2.24: Inserting an image in the prototype Abc ベ Ovel 31 ید ADE 4 Unsaved document Untitled Page 101
To insert an image:
To add a button: > From the Mobile - Android ICS section, drag and drop the Focused Button shape to the middle of the screen. ① > Double tap and label the button "Discover". 2 Unsaved document-Pend PENCIL S Search for shapes Mobile Android ICS 4 田 BE 田 Moble Android ICS Abc Tw button 1 Twe had Maje 20 12:00 Discover 2 Tim As 12 Unsaved docoment Used Page Figure 2.25: Adding an English button Repeat the steps you followed when adding the button to add the second button with the label "Arabic". Unsaved document - Pencil PENCIL M... Search for shapes Common Shapes Mobile - Android ICS Hi-Fi version of the Android 。 ICS UI alamante Basic Aconba DULLOM Web Elements 田 100% ALIGNMENT Desktop- GTK Widgets Screen Незае Dialog Header Abc - Desktop- Satchy Text Button Discover GUI 田 田 Desktop- Windows XP Widgets Pressed Focused Button Button EE 田 The Flowchart 田 Text Field Focused TextFlew Mobile- Android ICS 田 Activated TextFiew Check Box Mobile- IOS U Stencils 1440 12:00 SAME SPACES Focuse Pressed Checkbox Checkbox ⚫ Unsaved document Untitled Page Figure 2.26: Adding an Arabic button وزارة التعليم Ministry of Education 102 2024-1446 12 B Filter Add Page... × Properties
To add a button:
Multi-Page Application The user cannot interact with the Pencil Project prototype, so the multiple app screens must appear side by side in the same order they would appear while using the actual app. Create a Multi-Page Application A Multi-Page Application (MPA) consists of several pages with static information (images, text, etc.) and links (text, button, image, etc.) as well as other pages. -- Figure 2.27: Multi-page application To create the app's second screen: > From the Mobile - Android ICS section, drag and drop the Phone shape to the right of the first Phone shape. ① > Drag and drop the Status Bar shape to the top of the phone screen as it looks in a real phone. 2 > Below the status bar, add the Screen Header shape, 3 then double-click and type in the title "Discover Saudi Arabia". 4 > Change the text size to 11 from the Font Editor bar. 5 Unsaved document-Pencil =PENCIL S... M... Search for shapes Common Shapes ww Cements 田 Mobile- 日 Android ICS 1 12:00 version of Deskton OTH Phone Table Widgets Desp Dietol Status Navigati BUI Discover EE Desktop ActionBar Blue Widgets ActionBar 田 BB OWN Button 田 AltonBa Mobile- Android ICS 田 Mobde- 128 LK Stencils 3 ADC 9 وزارة التعليم Ministry of Education 2024-1446 Twit Unsaved document Untitled Page --- Discover Saudi Arabia 4 Figure 2.28: Creating a second screen 5 12:00 2 D 103
Multi-Page Application
To create the app's second screen:
Repeat the steps you followed when adding the image and the Screen Header to make the screen look as shown on the right. Unsaved document Pencil = PENCIL S M... Search for shapes Conscion Shapes BADC Mobile- Android ICS 16-F version of the And ICS UI wwwb 田 Desktop Screen OTH Woges Header Dialog Header ADC 4 อ ห Desktop- Text Burton Discover Qu 用 Desktop Windows Pressed Wogets Button Focused Button 田 田 TextField Focused TextFiew Mobile- Android ICS Mobile Activated TextFiew Cleck Box Focuse Pressed Checkbox Спесках Then you have to add two images displaying the cities. of Riyadh and Jeddah as shown. Unsaved document Pencil =PENCIL Search for shapes وزارة التعليم Ministry of Education 104 2024-1446 Unsaved document Untitled Page TEXT STYLE 13 B 12:00 12:00 Discover Saudi Arabia Cities Figure 2.29: Setting up the second screen 雞排 TEXT STYLE Common Shapes Common Shapes Collection of 12:00 12:00 Discover Soudi Arabia Cities C Web Demet EEE N-Pat Dang отк 10 1 ADC aught ☑ Tangle 4 Detto Free Line Trange ΤΙ ΟΙ ΔΙ Desig Widgine EEE Mible- Android 100 田 Thang Parale Mable Stacos Diamond Discover Unsaved document Untitled Page Figure 2.30: Adding images of cities a
Figure 2.29: Setting up the second screen
Figure 2.30: Adding images of cities
To insert a text shape: > From the Mobile - Android ICS section, drag and drop the Text shape. 1 > Then double-click and type " RIYADH". 2 > Change the text size to 22 from the Font Editor bar. 3 > Click on Color Palette 4 and choose the color with code: #FFFFFF. 5 > Repeat the steps to add a label for the second image. 6 Unsaved document - Pencil = PENCIL M... Search for shapes kort 100% ALIGNMENT BAME ZEE&CES TEXT STYLE COLORS E Helvetica Common Shapes Mobile- Android ICS Hi-Fi version of the Android ICS U alamante Basic Web Elements незаег мезоег Abc 田 Desktop- GTK Widgets Text Button Vo Desktop- Sketchy 1 GUI Pressed Focused Button Discover Button 田 Desktop- Text Windows XP Text Field Widgets Focused TextFiew 田 Flowchart 田 田 Mobile- Android ICS Mobile- IOS U Stencils Activated TextFiew Check Box Focused Pressed Checkbox Checkbox Radi Focused وزارة التعليم Ministry of Education 2024-1446 اكتشف Unsaved document Untitled Page 12:00 12:00 Discover Saudi Arabia Cities RIYADH 2 105
To insert a text shape:
Unsaved document-Pencil = PENCIL S M Cl... Search for shapes Mobile - Android ICS Common Shapes the Android Hi-Fi version of Basic ICS UI alamants Welt Bements Abc EE 田 Desktop- Text Button GTK Widgets 100 Desitop- Sketchy Pressed Focused Button Discover Button EE Desktop- Windows The Tam XP Widgets Text Field Focused TextFiew EE Flowchart EE 田 Activated Check TextFiew Box Mobile- Android ICS Mobile Stencils Focused Prassed Checkbox Checkbox Unsaved document-Pencil =PENCIL Grid Wheel 5 零量12:00: Helvetica Untitled Document color palette No colors defined. Recently used colors: Helvetica 3 HTML code: #FFFFFF 4 Opacity: 100% Add You can also click on the Properties tab to make changes to the text. TEXT 524 Discover Jeddah Search for shapes Mobile- Color #FFFFFF 12:00 12:00 Discover Saudi Arabie Common Android ICS Handurities Font shapes HF version of Cities 22 the A CSU RIYADH Alignm Basic Dimarts ADC Desktop UTK Widgets TWIT Gutron Destro Pressed Focused Discover JEDDAH 6 1943 Button Button 田 Desktop Windows SP Widgets Focused Flowchart Che TextFie Box Mobile Android ICS Moble Focused Pressed Chatkhas وزارة التعليم Ministry of Education 106 2024-1446 • Radio Гослес Rado Unsaved document Untitled Page Add Page Figure 2.31: Setting up text label for the second image Restore Default Settings Properties
Figure 2.31: Setting up text label for the second image
To create the app's third screen: > From the Mobile-Android ICS section, drag and drop the Phone shape to the right of the second Phone shape. 1 > Drag and drop the Status Bar shape to the top of the phone screen as it looks in a real phone. ② > Then drag and drop the Text shape 3 and then from the Properties tab change the color of the text and write "Al Masmak". ④ > Repeat the two last steps to write "Boulevard of Riyadh City". 5 Unsaved document-Pencil PENCIL Sh... M... C Search for shapes ถ K Mobile- 12:00 Android ICS 12:00 Discover Saudi Arabia Android Cities RIYADH Common Shapes @ Basic wwb Elements 田 1 HF ver Desktop- TH Widgets Ve Desstop Suteity QU 田 田 Desktop- Windows Phone Tablet Status Navigat JEDDAH Ba Bar AP ActionBar Widgets Blue ActionBar 田 Flowchart EB 田 Mobile Android ICS Dark Border ActionBar Bottom 田 Screen Dissog Header Невсег Mobile 1019 SA Stencile Abc Text Button 3 وزارة التعليم Ministry of Education 2024-1446 D Unsaved document Untitled Page a TEXT STYLE PencilU 28 Al Masmak Cities tristeet textRD Discover Riyadi Figure 2.32: Creating a third screen TEXT Al Masmak 4 865 201 2 Color #FFFFFF 12:00 PencilU Font 28 12:00 Alignment Restore Default Settings CRISTOFFERED D 12:00 Properties Al Masmak Boulevard of Riyadh City 5 a 107
To create the app's third screen:
Finally, create the last screen, which displays an image and a brief description of Al Masmak. Unsaved document-Pencil =PENCIL Search for shapes Cli... Mobile- Android ICS Hi-Fi version of Flowchart the Android 田 田 ICS UI alamants Mobile- Android ICS E Mobile- Screen Dialog 10S U Header Наво Stencils Abc 田 Mobile- 106 wetra E Text Button ㅁ COLONE PencilU 14 Discover Saud Acti 12:00 Discover Sad Arab 12:00 12:00 Cites RIYADH Al Masmak Discover JEDDAH Boulevard of Riyadh City Desktop Prototype GUI Pressed Button Focused Button Unsaved document Untitled Page Figure 2.33: Creating the final screen Located in the heart of the okt quarter in Riyadh cy, Al Masmak the word means a high, strong and thick building was built during the reign of an Abdullah bin Faizal bin Turki Al Saud Al Masmak Fortress is one of the most promine national monuments still standing this day The fortress played an integral role in the Unification of Saudi Arabia 1268 Filter Add Page... X Properties The Role of Users in Prototyping Do not forget to save your project when finished. After the prototype creation process is complete, it is important that it be viewed by users. To facilitate the prototyping process, the system analyst must clearly communicate the purpose of the prototype to users, making it clear that prototypes are only valuable when meaningfully engaged with users. Best Strategies for Getting Feedback on Prototyping: Find multiple, alternative ways to get feedback from users such as interviewing them to get them to talk about their thought process while using the prototype. • Test your prototypes on the right people. If you're in the early stages of your design project and want to get some simple or advanced feedback, testing your prototypes on your teammates should suffice. • Be sure of what you are going to test and ask the appropriate questions. • Be neutral when presenting your ideas, avoid being biased towards your idea, and try to recognize the error when there are negative reactions. • You can improvise from the original test scenario in order to adapt to the test environment, so as to get the best feedback from the users. • Let the user contribute ideas based on your prototype and provide helpful criticism that will improve the application. After obtaining feedback from users, the system analyst should modify the home screen designs pull according to users' feedback on the prototype. Ministry of Education 108 2024-1446
Figure 2.33: Creating the final screen
The Role of Users in Prototyping
Best Strategies for Getting Feedback on Prototyping:
1 Exercises Match the types of prototypes with the appropriate descriptions. О High-Fidelity Prototype 1 О Low-Fidelity Prototype 2 It is used in the intermediate stages of product development. It is designed to represent the functionality of the system and focuses more on it than appearance. Closest prototype to what the actual final product looks like. О It can be expensive and time consuming. Medium-Fidelity 3 Prototype وزارة التعليم Ministry of Education 2024-1446 О Changes can be made to it easily and quickly. It can be created with paper. 109
Match the types of prototypes with the appropriate terms.
2 3 What are the benefits of prototyping? What are the tips to follow when preparing a prototype? وزارة التعليم Ministry of Education 110 2024-1446
What are the benefits of prototyping?
What are the tips to follow when preparing a prototype?
4 What are the three prototyping methods? 5 Complete the prototype of the Visit Saudi Arabia app. 1. Open the app prototype with Pencil Project. 2. Add a new page in the project. 3. Create a screen to display the second highlight of Riyadh. 4. Create three new screens for Jeddah city, as we did for Riyadh city: • one screen where two highlights in Jeddah are listed. • two screens to display each of the two highlights of Jeddah. وزارة التعليم Ministry of Education 2024-1446 111
What are the three prototyping methods?
Complete the prototype of the Visit Saudi Arabia app.
