CS375: Software Engineering - GUI

Activity Goals

The goals of this activity are:
  1. To implement a Progressive Web App (PWA) in JavaScript, HTML5, and CSS
  2. To create interactive user interfaces using Python
  3. To explain best practices in developing user interfaces for usability
  4. To choose a color palette for a user interface and verify its contrast and color-blind accessibility against WCAG guidelines

Supplemental Reading

Feel free to visit these resources for supplemental background reading material.

The Activity

Directions

Consider the activity models and answer the questions provided. First reflect on these questions on your own briefly, before discussing and comparing your thoughts with your group. Appoint one member of your group to discuss your findings with the class, and the rest of the group should help that member prepare their response. Answer each question individually from the activity, and compare with your group to prepare for our whole-class discussion. After class, think about the questions in the reflective prompt and respond to those individually in your notebook. Report out on areas of disagreement or items for which you and your group identified alternative approaches. Write down and report out questions you encountered along the way for group discussion.

Model 1: A Static Progressive Web App for Mobile Clients

Review the example below as a class.

Questions

  1. How do we name elements in HTML5 for dynamic updating? What is the name of the main body element that we're updating?
  2. What JavaScript command is used to set the content of a web page element?
  3. How do we define each list item to be a box?
  4. How do we ensure that each box appears in a dynamically-sized grid?
  5. How do we intercept a fetch and serve the content locally, serving as a cache?
  6. Load the web page in a Chrome browser on your mobile device, if you have one. From the Chrome menu, you can add the app to your home screen. Try changing the navigation color and the home screen icon.

Embedded Code Environment

You can try out these code examples in a development environment of your choice! Note that some embedded projects have multiple source files; you can see those by clicking the appropriate file tab to open that file.

Model 2: A Dynamic PWA Using a Backend Web Service

Questions

  1. In script.js, where has the courses array gone?
  2. How has the service worker changed to intercept fetches and forward them to the web server if they are remote data calls?
  3. What would happen if the server side data changed? What could we do about this?

Embedded Code Environment

You can try out these code examples in a development environment of your choice! Note that some embedded projects have multiple source files; you can see those by clicking the appropriate file tab to open that file.


Model 3: Application Graphical User Interface (GUI) with Python

Questions

  1. In your own words, what is a callback function?
  2. Design a GUI using pygubu-designer with an input and a display element, and connect them with a callback.
  3. Choose a UI design basic principle and describe it in your own words with an example. You may draw a sketch or use PowerPoint to do this.

Embedded Code Environment

You can try out these code examples in a development environment of your choice! Note that some embedded projects have multiple source files; you can see those by clicking the appropriate file tab to open that file.

Choosing Colors: Palettes, Contrast, and Accessibility

Color is one of the first things a user notices about your interface, and one of the first things teams get wrong – either by using every color at once, or by choosing combinations that a meaningful fraction of users literally cannot read. Fortunately, color choice is one place where design has rules you can compute.

Building a Palette

Do not pick colors one widget at a time; pick a palette (a small, fixed set of colors) up front and reuse it everywhere – consistency is itself a usability feature. Tools like Coolors, Adobe Color, and Material Design’s palette builder generate harmonious palettes from a single starting color, using color-wheel relationships (complementary, analogous, triadic).

A time-tested allocation is the 60-30-10 rule, borrowed from interior design:

Share Role Example in a web app
60% Dominant/neutral color Page and card backgrounds
30% Secondary color Navigation bars, headers, panels
10% Accent color Buttons, links, highlights, alerts

Because the accent color is scarce, it pops: the user’s eye goes exactly where you want it (the “Submit” button, the error message). If everything is an accent, nothing is.

Contrast You Can Calculate: WCAG

The Web Content Accessibility Guidelines (WCAG) define a measurable contrast ratio between text and its background:

contrast = (L1 + 0.05) / (L2 + 0.05)

where L1 and L2 are the relative luminances (perceived brightness, 0 for black to 1 for white) of the lighter and darker color, respectively. Relative luminance is a weighted sum of the linearized R, G, B channels:

L = 0.2126 * R + 0.7152 * G + 0.0722 * B

(each channel is first converted from its 0-255 value to a 0-1 value c', and then gamma-corrected: c = ((c' + 0.055) / 1.055) ^ 2.4 when c' is above 0.03928, else c = c' / 12.92). Notice green dominates the weights – human eyes are most sensitive to green.

The ratio ranges from 1:1 (identical colors) to 21:1 (black on white). WCAG requires, for Level AA conformance:

  • 4.5:1 minimum for normal body text
  • 3:1 minimum for large text (18pt+, or 14pt bold) and for UI components/icons
  • 7:1 for the stricter Level AAA body text

Worked example: medium gray text #767676 on a white background. All three channels are 118/255 = 0.4627; gamma-corrected, c = ((0.4627 + 0.055) / 1.055) ^ 2.4 = 0.1811, and since the three weights sum to 1, L_gray = 0.1811. White has L = 1.0. Then contrast = (1.0 + 0.05) / (0.1811 + 0.05) = 4.54 – this gray barely passes AA for body text; anything lighter fails. You do not have to do this by hand: paste any foreground/background pair into the WebAIM Contrast Checker and it computes the ratio and pass/fail for you. But now you know what the number means.

Designing for Color Blindness

About 8% of men and 0.5% of women have some form of color-vision deficiency, most commonly reduced ability to distinguish red from green. Practical rules:

  1. Never encode information in color alone. Pair color with a second cue: an icon, a label, a pattern, or position (a red X and the word “failed”). This is also a WCAG requirement (“Use of Color”).
  2. Avoid red/green as a distinguishing pair; blue/orange is the classic safe alternative.
  3. Test your palette in a simulator such as davidmathlogic.com/colorblind or the Coblis simulator, which re-render your colors as they appear under protanopia, deuteranopia, and tritanopia.
  4. When in doubt, start from a published color-blind-safe palette such as Paul Tol’s palettes or ColorBrewer (designed for maps and charts).

Questions

  1. Choose a palette for your course project using one of the generator tools, allocate it with the 60-30-10 rule, and record the hex codes in your Objects/API Summary design checklist.
  2. Verify your body-text color against your background color with the WebAIM checker. What is the ratio? Does it meet AA? AAA?
  3. Run your palette through a color-blindness simulator. Do any two colors that mean different things in your UI become indistinguishable? What second cue (icon, label, pattern) will you add?
  4. Find a real website that fails one of these guidelines, take a screenshot, and propose the smallest fix that would bring it into conformance.

Submission

I encourage you to submit your answers to the questions (and ask your own questions!) using the Class Activity Questions discussion board. You may also respond to questions or comments made by others, or ask follow-up questions there. Answer any reflective prompt questions in the Reflective Journal section of your OneNote Classroom personal section. You can find the link to the class notebook on the syllabus.