Design

  • 1.2.7 – Construct suitable representations to illustrate system requirements.
  • 1.2.8 – Describe the purpose of prototypes to demonstrate the proposed system to the client.
  • 1.2.9 – Discuss the importance of iteration during the design process.
  • 1.2.10 – Explain the possible consequences of failing to involve the end-user in the design process.

The design stage is the first stage of the software development life cycle (SDLC) where one can begin to see what the finished product will look like and how it work. In this section you will get the chance to create a GUI prototype, learn how to connect it to an sqlite database, create flowcharts that will help you in your IA, and plan an appropriate test plan.

Prototypes

AScam would like Modo to create the initial designs, not only for the website itself, but for the administrative tools that will be used by their employees. Due to the low standards and pay of the company, their employees are not exactly the sharpest tools in the shed, and thus require more simple tools than your average IT person. With the AScam website, one of those tools will be a database viewer. Miguel, from AScam, has drawn up some requirements that will need to be followed to create the prototype.

  • Should be entirely GUI based.
  • Must be a split window with the database table on the left and the table listing on the right.
  • There should be options to add and remove tables.
  • There should be options to add or remove rows from the tables.
  • There should be a quit button.
  • There should be some sort of login for security purposes.

In creating this prototype you will be making a graphical user interface (GUI). This is something that almost every application uses, whether it’s a on a computer or phone, In this section, you’ll be looking at  PyQt, which is a library that allows you to create cross-platform Python GUI applications. If you don’t have this installed on your computer, you can do so at the command line by typing the following commands. 

Installing PyQt

pip install pyqt5
pip install pyqt5-tools

PyQt 

PyQt is a library that connects your Python code with the way the operating system handles creating windows, buttons, sliders, etc…  All those nice GUI elements that you take for granted are actually built into the operating system. When you write a program using PyQt it will talk to the OS and say, “I need a window with buttons here and a menu bar,” and the OS will provide all the necessary components. That means when you run your PyQt program on a Mac it’ll get different GUI elements (often called widgets) than it will get on a Windows machine. 

There are two ways that you can program a GUI, either by hand, or by using the Qt Designer. The Designer tool is what you’ll be using, as it makes things much easier. It can be found in the your Python36 folder in the following path. 

/your location/Python36/Lib/site-packages/pyqt5_tools/

Inside the above folder, you will find an executable called designer. Run it and you will get the following: 

Take your time to play around with this before moving on to the task.

Practical activity: Building a GUI

Using the requirements above, you should create a GUI by making use of the widgets below. As you add the widgets you will want to change their object names in the properties window. Normally, the object name will include the type within it. For examples a PushButton that adds a row might be named addRowBtn, while a TableWidget would be dataTbl. You can choose your own names, but be consistent. 

Save your GUI to a folder called gui_demo, and then in the same folder save a Python file called main.py. You can then use this base code to connect the GUI file you save (something.ui) to your Python file. Now when you run the main.py it will load the GUI for you. 

Huzzah, you are a now a GUI master!

Written task: Why prototype?

Prototyping is an essential part of good design, and whether it’s the AScam project or your IA, you’ll want to do some prototyping before you continue on to the next steps. Read over this article and then answer the questions below. 

  1. Summarize the uses of a prototype in the article. 
  2. Weigh the pros and cons of low-fidelity to high-fidelity prototypes, and give a situation when you’d use each. 

Diagrams and Flowcharts

During the design stage is when you start drawing up sketches of the actual product, both of the user interface (UI) and how the product works under the hood. Generally, a design (this goes for your IA as well) should contain the following elements, roughly in the same order. 

  • User interface designs with notations on usage.
  • A top-level flowchart of how the program functions from the user perspective. 
  • If applicable, a look at the database, file structures or data structures. 
  • Listing of files and functions with their uses (no code or detail).
  • Flowchart showing how the code works from the develop’s perspective. 

User interface

The design of a user interface can be done using a tool like Qt Designer, various online tools, or even by hand. The idea is to give the client a general overview of how things will look by using something like a wireframe, or dazzling them with your artistic skills by creating a full mockup. The difference is illustrated in the picture below. 

 

How you choose to do this is up to you, but a different layout should be created for each of the major screens with annotations to describe anything that is not already abundantly clear. 

 

Practical activity: Wireframes and mockups

There are a number of free tools available for designing a UI, such as Mockflow and Figma. If you’re using PyQt, then it’s your UI designer, and part of the actual product. What you use depends greatly on what you’re building. Figma is more free form, while Mockflow has templates for desktop applications and websites. 

In this activity, you are going to use one of the tools above, or another of your choice, in order to create a wireframe model. If you’d like to get started on something for your IA, that may be a good choice, but you can create anything you’d like. Use this website as a guide, and make sure that you’ve annotated anything that is not obvious. When finished, take a screenshot and put it in your notes. 

Data layout

Having an understanding of how the underlying data in a program is structured is important in knowing how the program built on top of it will work. Databases, in particular, require one to pay close attention to design, as it can greatly impact the speed at which data can be accessed, as well as how efficiently it makes use of storage space. Database designs in the real world will look something like the one below, except with potentially hundreds of different tables. 

Alternatively, you may have a text file in which each row is storing information, and then you’d want to provide an example of what sort of layout and data will be used. For example, in the image below is being stored the name, birthday and profession of various individuals. 

In such a case as the one above, your design would include the data types and some sample data. In this case that would be [string][string][date][int][string], for example. 

Practical activity: Sqlite with Python

Sqlite is a simple and easy to use database that you can use with Python. You can create tables and manipulate data all from a Python script. Using this database design and this tutorial on Python and sqlite databases, create a database which resembles the design. You can check that your design is working by dropping the database file into this website. It’s recommended that instead of trying to build everything at once and then testing, to create a single table, add a row, and then upload to see if it’s working correctly. Rinse and repeat.

Flowcharts

You will encounter flowcharts in your Paper 1 as well in the Design and Development stages of your IA. Within Paper 1 you may need to outline how an algorithm works, and one option could be using a flowchart. Alternatively, you may be given a flowchart and asked to determine its purpose or create a trace table from it. The flowcharts you will be responsible for understanding don’t necessarily adhere to any rigid rules, aside from that they will be constructed from the following basic components. 

Subprogram is an uncommon flowchart element to find on any of the IB exams after 2014, though if you look at past papers from prior to that, you may stumble across it. The flowcharts you will be concerned with will likely implement a simple algorithm, and contain only a few elements, such as the example on the left, though flowcharts can be as complex as the example on the right. 

 

Within the context of your IA you will be creating flowcharts or equivalent diagrams to explain the following things. 

  • How the user will interact with your program.
  • How information moves from the interface to a file or database. 
  • Any algorithmic elements of the program that meet the complexity criteria desired in the development stage. 

The nice thing about flowcharts if that they don’t count as part of your word count as long as they are not annotated with additional explanations could count as extended writing. 

Practical activity: Flowchart

This task involves creating a program from a flowchart, a flowchart from a program, and then creating a flowchart for user interface of your product. With this final task it’s likely you’ll come back and modify things later, and that’s ok. What’s important is that you get started, and can begin to figure out what will work and what wont. 

While there are a number of free, and very nice looking, flowchart programs out there, draw.io works well, and has no limitations as far as items you can add or save. 

Task 1: Using this flowchart create a program to determine if a number is prime. 

Task 2: Using the code example for a linear search given at the bottom of this page, create a flowchart that performs the same process.

Task 3: Create a flowchart showing how the user will interact with the user interface of your program. You can simplify where need be, and it’s not necessary to use the same flowchart symbols that you did for Task 1 and 2.

 

Usability

  • 1.2.12 – Define the term usability.
  • 1.2.13 – Identify a range of usability problems with commonly used digital devices.
  • 1.2.14 – Identify methods that can be used to improve the accessibility of systems.
  • 1.2.15 – Identify a range of usability problems that can occur in a system.
  • 1.2.16 – Discuss the moral, ethical, social, economic and environmental implications of the interaction between humans and machines.

What is usability?

Usability defines whether a product can be used as intended by individuals. There are a number of heuristics* which help define whether something is usable or not. (*A heuristic is a rule of thumb).

In looking at the above heuristics, you might notice that these can apply to just about any system, whether physical or software-based. Let’s look at the example of a cell phone, and see how each of these heuristics applies. 

  1. Visibility of status: Show in the bar at the top of the device
  2. Match system to real world: Apps, such as a calculator or digital phone
  3. Control & freedom: Ability to adjust settings
  4. Consistency & standards: Android or Apple have followed various design standards
  5. Error prevention: Ways to kills apps that have crashed
  6. Recognition: Use of icons and other ways to draw together each of the pages or menus
  7. Flexibility: Ability to modify windows, layouts, colors, and other features
  8. Aesthetics: Phones have all moved towards a similar design for a reason
  9. Error recovery: Allows users to recover data from errors at times
  10. Documentation: Online documentation

In looking at these, and the explanations, you can probably find some problems. For example, what makes something usable for one person may not be usable for another. With cell phones, some are happy with basic modification of the UI, while others wants more control and freedom. Others will need more documentation in order to figure out how to use the basic features, while some will easily be able use the phone after the first time picking it up. 

Improving usability

In order to improve usability it’s important to understand who the stakeholders are. If you’re designing for tech-savvy individuals you can make certain assumptions about how the product will be designed, while if you’re designing for people with disabilities you will need to make a number adjustments.

You will need be aware of the need for touch pads, braille readers, text-to-speech (TTS), voice recognition, and touchscreens.  You will also need to be able to reason out possible problems with these in different systems and scenarios. 

Written task: Usability

Task 1: For each of the following scenarios, identify two usability problems that could occur, and how they might be fixed. 

  • A messenger application for the phone
  • A secure entry system that uses facial recognition at an office building
  • A grade and reporting system at a K-12 school

Task 2: In the case of public systems, such as the metro or government websites, to what extent do they need to be designed to accommodate all users? Give examples of situations that should be accommodated, and those that wouldn’t be a priority. 

Designing for loss

  • 1.1.11 – Identify a range of causes of data loss.
  • 1.1.12 – Outline the consequences of data loss in a specified situation.
  • 1.1.13 – Describe a range of methods that can be used to prevent data loss.

Data loss

Data loss is a fact of life when it comes to individuals, companies, and government agencies. Hard drives die, backups get loss, and sometimes things just accidentally get deleted. For most of us this is not a big deal, but for companies losing data can mean the end of their business. Data loss can occur in a number of different ways. 

  • Corrupted data
  • Loss of physical device (HD, backup disk, etc…)
    • Natural disasters
    • Power surges due to poor facilities planning.
    • Carelessness
  • Viruses, malware, or ransomware
  • Malicious intent
  • Incompetence

There are a number of ways that one can avoid or recover from data loss. See the video to the right for more information, but stop at ~3:15 when the commercial starts. 

  • Back up 
    • Offsite or on the cloud
    • Physical onsite
    • Non-physical onsite
  • File recovery software
  • Regular maintenance
  • Installation of monitoring software

Redundancy

When working on a large technology product, especially one that requires storage of a lot of data, it’s important to build in measures to prevent loss. Redundancy is a key concept in modern data warehouses, where one file is often stored on multiple hard drives within the facility, or possibly on other, similar facilities, around the world. This does have a cost though, often in access speed and cost. Google warehouses burn through thousands of hard drives a year due to hard drive failure, for example. 

Redundancy

When working on a large technology product, especially one that requires storage of a lot of data, it’s important to build in measures to prevent loss. Redundancy is a key concept in modern data warehouses, where one file is often stored on multiple hard drives within the facility, or possibly on other, similar facilities, around the world. This does have a cost though, often in access speed and cost. Google warehouses burn through thousands of hard drives a year due to hard drive failure, for example.