1.1. About “Mission – Earth”
“Mission – Earth” is a web based online puzzle game to teach children of aged from 7 to11 some basic object oriented programming concepts such as executing procedures, calling functions and looping. The purpose is to let children have fun while learning the basic programming.
1.2. Background Story
In 2902, Earth is a long abandoned planet and is covered in piles of rubbish leftover from centuries of mass consumerism.
The humans have been riding around the space for over 8 centuries on a very large spaceship in order to survive after leaving the earth.
The descendants of the ship's original passengers have become extremely obese after centuries of floating on space relying on the ship's automated systems for their every need. They live on hovering chairs which provide them a constant TV, video chatting, clothing and even food.
They take their meals through a straw out of laziness without having to move, and now they can barely move because of their obesity.
But when the current captain learned about the planet earth, he realized their forgotten goal of floating on space was to go back to the home of mankind, the Earth if it was no more contaminated and lives could sustain on it.
The spaceship was originally programmed by the inventors to avoid going back to earth if it could not be proven safe in order to protect humankind and even the command by the captain will not work. In order to return to their planet, a proof of living thing must be brought back to the spaceship and analyzed to activate the command of “return to earth”.
So the captain decided to send a special robot to earth to search the proof that lives can sustain on earth. He will command for the actions of the robot by monitoring from the spaceship and his commands are crucial to complete the mission and for the humankind to go back home. The captain will explore the various places on earth with the robot and search the important substances to complete the mission.
2. UI design issues for multiple screen sizes
Today's devices such as mobile phones, tablets, laptops and desktop computers have very different screen sizes and resolutions. Usage of internet and accessing websites via mobile phones has been increasing enormously over a few years. Therefore, it is very important to consider the display on different screen sizes when creating a web application these days. Some of the current design issues for a web application to display well on various screens can be described as follow.
2.1. Screen Sizes and Resolutions
Typically, larger screens have more pixels and thus the ability to display a higher resolution but that is not always true. If an image is blurry on a phone but displayed well on a computer, it is likely to be a pixel ratio problem. Most modern mobile devices have a pixel ratio of 1.5 or 2 and therefore, for a mobile device with resolution of 720px X 1280px, an image of 1440px X 2560px will do best. There are many techniques to display elements well on different screen sizes and resolutions such as repositioning of elements according to width and height (screen size) of devices, scaling resolution of elements for different devices or, setting the elements to be flexible when displaying.
2.2. Webpage Layout
The horizontal width of the browser viewing the website would vary because different devices (mobile phones, tablets, desktops, and so on) may access the website, the browser window can be resized by the visitor, and the visitor can turn his/her phone to landscape or portrait mode, and so on. Therefore webpage layout issue is concerned to make the website look well on different browser sizes. There are generally four types of page layout for developing a website:
2.2.1. Static Page Layout
A static page layout or fixed layout uses a preset page size and does not change based on the width of the browser.
2.2.2. Liquid Page Layout
A liquid or fluid page layout uses percentages instead of pixels and so the page width is flexible and fit on any browser sizes.
2.2.3. Adaptive Page Layout
An adaptive page layout uses CSS media queries to detect the width of the browser and change the layout accordingly. It uses fixed preset sizes like a static layout but there are multiple fixed widths defined by specific media queries.
2.2.4. Responsive Page Layout
A responsive page layout uses both relative units and media queries, combining the concept of both liquid and adaptive layout. When the browser changes in width, a responsive layout will fit according to it but when the browser is over certain defined widths, the layout will change to accommodate the width of browser.
Desktops normally have large screens which can display huge amount of content well while mobile devices have small screens which are not suitable to make the same display as desktops. Therefore, organization content on a web page for multiple screen sizes is important for good user experience.
14px text on 2000px screen scaling down to 2px on a 300px screen is unreasonably small and also scaling 10px text up to 7 times is very big. Therefore, keeping typographic elements readable on devices by adjusting the layouts to the available screen width is important.
Needing too much scrolling on a page is unsuitable for every device. Large amount of content piling in a single column makes a page very long and difficult to get to the target content.
Mobile screens are touchable and normally fingers are used to handle them. So, the buttons, clickable icons or links should be big enough to make them easy to touch. According to Apple UI guidelines, the minimum size of tappable UI elements should be 44 x 44px.
2.3.4. Hiding and removing content
Many people may want the same user experience on their small devices as on large screen devices. But in some cases, it is just not possible. Complicated UI elements and features like advanced search, multi-step forms, tables and, dashboards or sliders are not suitable to display on small devices because they contain too much information. Therefore, hiding or removing for certain devices could be the solution.
Navigation on websites used to be horizontal along the top of the page and sometimes along with the menu bar on the left side of a page in the past. But today, mobile phone screens are too small to view a large navigation menu in addition to the primary content. Therefore, rather than showing the desktop site's navigation, navigation options should be minimized on mobile devices. Most sites do this with the three line method and magnifying glass:
One major issue that needs to be considered when designing a website to display on different screen sizes is working with images. There are many ways to resize images proportionately and the most popular option is using fluid images. The idea behind fluid images is to deliver images at the maximum size they will be used at. Therefore, no need to set the height and width in the design and the browser will resize the images as needed.
2.6. Video and Animation
To include multimedia features such as video or animation on a website should consider page load time and user experience on small devices. Creating multiple versions of videos and animations might be necessary to display at different resolutions and sizes for different devices. Use of videos can take a lot of bandwidth and so it should be minimized on mobile devices. For using video and animation on a website, the following issues should be considered.
• Will it reduce the usability of the website or app?
• Will it need extra resources that can increase the loading time, therefore harming the user experience on small devices?
• Will it improve the user experience of the site in a functional and delightful way?
3. Guidelines & Legal, Social, Ethical Issues
3.1. Review of Design Guidelines
There are many principles, guidelines or heuristics from organizations and experts such as W3C, Apple, Microsoft, Oracle, Neilson, Norman, Shneiderman, Tognazzini etc. to follow for HCI and UI design. Here is a review of a few guidelines and principles selected for the development of the prototype:
3.1.1. Shneiderman's Eight Golden Rules
1. Strive for consistency – The design and functionalities including terminology, menus, fonts, color, and layout should be consistent on the website.
2. Enable frequent users to use shortcuts – should allow the experienced users to reduce the amount of time interacting with the application.
3. Offer informative feedback – system feedback to user actions whether it is uncertain or significant is important for users.
4. Design dialog to yield closure – actions should have beginning, middle and end. Giving informative feedback when a group of actions completes make the user satisfied of accomplishment.
5. Error prevention and simple error handling – the system should be designed in a way that users cannot make serious errors.
6. Permit easy reversal of actions – users should be able reverse their actions.
7. Support internal locus of control – users should feel they are in control of the application and not the other way around.
8. Reduce short-term memory load – information on a single interface should be limited because users have short term memory capacity.
3.1.2. Jacob Nielsen's 10 Usability Heuristics
1. Visibility of system status – the system should always inform users about what is going on by appropriate feedback in reasonable time.
2. Match between system and the real world – the system's UI and features should be familiar to the user and avoid system oriented terms.
3. User control and freedom – when a system's function is chosen by the user's mistake, there should be an “emergency exit” to leave the unwanted state without going through the extended dialogue.
4. Consistency and standards – the system should not make the users wonder whether different actions, words or situations mean the same thing and should follow platform conventions.
5. Error prevention – designing to prevent the errors from occurring in the first place is better than good error messages.
6. Recognition rather than recall – the system should reduce the user's memory load by making objects, actions, and options visible. Having to remember information for extended dialogues is not appreciated by the user.
7. Flexibility and efficiency of use – accelerators which may not be useful for novice users help the expert users to sleep up the interaction with the system and so, the system can cater to both inexperienced and expert users.
8. Aesthetic and minimalist design – information which is irrelevant or rarely used should not be contained in dialogues.
9. Help users recognize, diagnose, and recover from errors – error messages should be described in simple and plain language.
10. Help and documentation – even if the system can be used without documentation, help and documentation are very helpful to the users.
3.1.3. W3C (WCAG 2.0)
• Non-text content should be provided text alternatives.
• Provide alternatives and captions for multimedia.
• Includes content which can be presented in different ways, including by assistive technologies, without losing the original meaning.
• Make easier seeing and hearing content for users.
• All functionalities should be available from the keyboard.
• Users should be given enough time for reading and using content.
• Avoid using content which can cause seizures for users.
• Help users to navigate and find content.
• Text should be readable and understandable.
• Content should operate and appear in predictable ways for users.
• Assist users to avoid and correct their mistakes.
• Application should be compatible with current and future user tools.
3.2. Legal, social and ethical issues considerations
Ergonomics is one of the major social and ethical issues in Software development and design. Besides allowing a wide variety of audience to use (which is inclusivity), ergonomics includes ease of use, effectiveness and being harmless to the users.
• Ease of use: Is the software easy to use for the users? Good user interfaces and documentation can provide ease of use.
• Effectiveness: Does the system allow the user gets his desired results with minimal actions, minimal memory load and system load time?
• Harmlessness: Does the system ensure that its user interface or its content does not harm the user physiologically, psychologically or emotionally?
Inclusivity is also a major social and ethical issue of software design and development. Inclusivity includes focusing on audience from various cultures, backgrounds, religions and genders and disabilities. It is the responsibility of developers to determine the types of users who are going to use the system. There are four main factors developers should think of when considering the inclusivity of the system:
• Cultural background: Is the system cultural biased? Various cultural backgrounds should be considered when designing the application; developers must understand or at least be able to empathize the users' needs and beliefs. Though it is impossible to know all the cultures, it is fairly easy to include users from dominant cultures in the testing process. Different images or icons can be interpreted differently by the users from different cultural backgrounds. A content which is delightful for a user could be mean or offensive to another, especially due to their religious beliefs.
• Economic background: Does the system aim at a particular economic background? The economic background factor can be concerned at specific industry, local, national or global scale. Developers are responsible to know the economic capacity of targeted users, because it helps to increase the inclusivity of the system.
• Gender: Is the system suitable for all gender? The system should not be gender biased and it should be accessible by all gender.
• Disabled People: Is the system accessible by physically or mentally disabled people? The system's content should be accessible by physically or mentally disabled people.
There are three main issues concerning privacy:
Intrusion – Does the system intrude into the users' lives without permission? No one has the right to intrude people's lives without permission but today, telesales, spam, advertisements and several others are intruding people's lives. By concerning people's privacy, the system should give users options to allow or disallow e-marketing, newsletters or notification-emails etc.
Control of personal information – Do the users lack control of their personal information on the system? Nowadays, people have less control over their own personal information because users do not know where all their personal data resides when they register on a website or fill up a form online. Therefore to increase the users' comfort level, the system should at least let the users know that how their information will be kept.
Surveillance – Do the system give the users freedom from surveillance? There are many types of surveillance on the Internet today such as spyware, cookies, observation by specific people, organizations or governments etc. For the sake the users' privacy, the system should inform users and give options to allow or disallow cookies and other tracking materials if included.
...(download the rest of the essay above)