Selection Sort: Comparing Each Adjacent Item

The next sorting algorithm in this series is the selection sort. Selection sort is also one of the easiest algorithms to understand and translate into functioning code.

A basic example of a selection sort would be to line up ten people(all having varying heights) in a row. Find the shortest person in the line and switch them with the person in position one. Then, find the next shortest person and swap them with the person in position two. Repeat until all ten people are sorted from shortest to tallest.

If we have a list with six items, we will need to make a comparison on the first element five times, the second element four times, the third element three times, etc.(5+4+3+…) From this, we can generalize that that worst-case runtime is 0(n²). Also, we will be using two for loops which also hints to a n² runtime.

Here is a basic example of a selection sort in Java.

/**
 * @author Anthony Jones
 * @version 1.01
 *
 * This is the selection sort method. specifically
 * an in place comparison sort
 *
 * @param A
 * int array
 */
public static void selectionSort(int[] A) {
  int temp;
  for (int i = 0; i < A.length; i++) {
    int n = i;
    for (int j = i + 1; j < A.length; j++) {
      if (A[j] < A[n])
        n = j;
    }
    temp = A[i];
    A[i] = A[n];
    A[n] = temp;
  }
}

Lastly, don’t forget to test your code. Here is a JUnit test case I wrote to test if my result arrays were sorted.

/**
* The test for selection sort method three for large array
*
* @author Anthony Jones
* @version 1.01
*/
@Test
public void selectionSortTestThree_Large() {
  System.out.println();
  System.out.println("Selection Sort Test Three");
  int[] arr = { 1, 4, 2, 9, 7, 3, 10, 20, 11, 13, 19 };
  System.out.println("intital array to be sorted");
  for (int i = 0; i < arr.length; i++) {
    System.out.print(arr[i]);
  }
  System.out.println();
  int[] expected = { 1, 2, 3, 4, 7, 9, 10, 11, 13, 19, 20 };
  System.out.println("expected array to be compared to");
  for (int i = 0; i < expected.length; i++) {
    System.out.print(expected[i]);
  }
  System.out.println();
  System.out.println("intital array after the sort");
  sortingAlgorithms.selectionSort(arr);
  for (int i = 0; i < arr.length; i++) {
    System.out.print(arr[i]);
    assertEquals(arr[i], expected[i]);
  }
}

Bubble Sort: Comparing Each Adjacent Item

The first sorting algorithm that we will discuss in this series is the bubble sort. Bubble sort is one of the simplest algorithms to understand and translate into functioning code.

A basic analogy of a bubble sort would be to line up ten people(all have varying heights) in a row. Moving from left to right, if the current person’s height is greater than the next person’s height, swap them around. Repeat until all ten people are sorted from shortest to tallest.

In the code, we would simply write a method for swapping two elements of an array and then with for loops, traverse the array until all items are sorted.

The array will need to be traversed at least n-1(n is the number of objects in the array) times to ensure that all objects are sorted. While the bubble sort is useful as a learning tool, it is not one of the most efficient sorting algorithms. It’s worst case runtime is 0(n²), because we need to make n iterations through a list checking all n elements each pass through.

Below is a basic example of a bubble sort in Java.

/**
 * @author Anthony Jones
 * @version 1.01
 *
 * This method repeatedly steps through the list
 * and compares each adjacent item and sorts.
 * @param A
 * int array
 */
public static void bubbleSort(int[] A) {
  boolean isSwapped;
  int temp;
  for (int i = 0; i < A.length; i++) { isSwapped = false; for (int j = A.length - 1; j >= i + 1; j--) {
      if (A[j] < A[j - 1]) {
        // Lines 19-22 can be replaced with a swap method
        temp = A[j];
        A[j] = A[j - 1];
        A[j - 1] = temp;
        isSwapped = true;
      }
    }
    if (isSwapped != true)
      break;
  }
  return;
}

This code can be further optimized. Please give it a try yourself and post a link to your solution in the comments. Here are some hints on how to improve the performance of your code.

Method 1:

After one iteration through the array, we don’t need to check the rightmost element because we already know that it is sorted. After two iterations, the last two elements in the array will be sorted. If we follow this pattern, we can generalize that after k iterations through the full array, checking the last k elements is redundant.

Method 2:

Check if the list is sorted after each iteration.

Lastly, don’t forget to test your code. Here is a JUnit test case I wrote to test if my result arrays were sorted.

/**
 * The test class bubbleSort method three.
 *
 * @author Anthony Jones
 * @version 1.01
 */
@Test
public void bubbleSortTestThree_Large() {
  System.out.println();
  System.out.println("Bubble Sort Test Three");
  int[] arr = { 1, 5, 9, 2, 4, 3, 10, 20, 13, 15, 11 };
  System.out.println("intital array to be sorted");
  for (int i = 0; i < arr.length; i++) {
    System.out.print(arr[i]);
  }
  System.out.println();
  int[] expected = { 1, 2, 3, 4, 5, 9, 10, 11, 13, 15, 20 };
  System.out.println("expected array to be compared to");
  for (int i = 0; i < expected.length; i++) {
    System.out.print(expected[i]);
  }
  System.out.println();
  System.out.println("intital array after the sort");
  sortingAlgorithms.bubbleSort(arr);
  for (int i = 0; i < arr.length; i++) {
    System.out.print(arr[i]);
    assertEquals(arr[i], expected[i]);
  }
}

I recently spoke with a non-profit organization in North Carolina that needed an increase in charitable donations. During an assessment of their current site, I noticed that their online giving process needed some simplification and testing. Your goal should be to simplify the process of making an online donation. This article will briefly guide you to some of the major things to look for. Getting people to open their wallets online is a very difficult thing to do, so I hope some of what you learn here can be used with your clients.

Donation Button

Ensure that the donate button is clear and distinct from the background and other elements on the page. User’s number one complaint is not knowing how to donate. Make this the easiest element to find on the page. Another important thing to remember is to change button text so they say what they do, instead of having a button labeled “submit”. This will help users navigate your site more efficiently.

Content has the Lead Role

This article won’t be covering content, but it is important to point out that content is the number one factor in increasing your conversions. Users love seeing uncluttered content that is easily scannable and consistent. Use language and offer content that is crafted specifically for the audience. Ask yourself if visitors can connect with the organization on any page of the site? If so, you are on your way to improved results.

Distinguish between one-time and monthly donations

There are two basic forms of donations that most charitable organizations accept: recurring payments and single donations. Make sure you allow users to select one or the other from the beginning of the process. Also, if the organization accepts any other forms of payment, include them as a third option as shown in the example below.

I designed a mockup of recurring payments and a single donation button. This is the first step after a user clicks on the donate button.

A/B Testing

One of the most important things you will need to do to see increased donation conversions is through A/B Testing. Ensure that you are regularly benchmarking and testing the design, imagery, copy, usability and page speed. Some changes work well with certain audiences, but not others, so know your users and their behaviors.

Donation Form Best Practices

1. Put the easier field groups first to lower the engagement barrier
2. Make the form look short and easy to complete
3. Remove any unnecessary form fields
4. Eliminate body copy
5. Allow the ability to change details like donation amount
6. Indicate that the user’s information is secure (Note: I’m simply using a lock icon in the example below)
Example mockup of the payment details form

Lastly, get creative and try out new things. For example, you could create a ‘donate via text messaging’ option for your mobile users. Again, test it out with tools like Optimizely and Google Analytics, then monitor the results.

For further reading, I recommend a book on persuasive design patterns called Evil By Design by Chris Nodder. It is an excellent read on how to leverage human habits in our designs.

Phil Weaver, Eve Andersson, Casey Burkhardt, Hugh Oh, and Mark Riccobono presented at Google IO on Android accessibility and how we can remove and replace assumptions about users and how they interact with Android apps.

I will briefly cover three means of achieving this and the assumptions that come along with each technology.

TalkBack: this is a screen reader that adds spoken, audible, and vibration feedback to your device. It helps blind and vision-impaired users interact with their devices. It makes the assumption that users can hear but not see.

Enable TalkBack

BrailleBack: BrailleBack allows users to connect a refreshable braille device via Bluetooth. Users can navigate using their display and input text using the braille keyboard. This tool assumes that users can’t hear or see.

Enable BrailleBack

Switch Access: this enables users to interact with a device using one or more buttons/switches that work like keyboard keys. This removes that assumption that a user can touch and interact with a screen with their hands.

Enable Switch Access

Developers have the important task of making sure application code can properly interact with these devices. Phil Weaver noted that the World Health Organization estimates 15% of people have some disability (1 billion people).

Catching accessibility bugs as early as possible using automated testing(Android Lint, etc.) and manually testing are essential to making sure our Android applications can be using by everyone.

The basic solutions making your apps accessible on Android are the following:

1. Adding descriptions to all image that convey meaning

contentDescription="@string/desc"

2. Give users immediate feedback on view updates.

android:accessibilityLiveRegion="polite"

3. Remove redundant text

android:contentDescription="7 Button" // incorrect as screen reader reads "7 Button Button"
android:contentDescription="7" // correct as screen reader reads "7 Button"

4. Remove extraneous clickable views on the screen

android:clickable="true" // Region 1
android:clickable="true" // Region 2
android:clickable="true" // Region 3

When using a tool such as Switch Access, users will have to scan through all regions that are clickable, so having extraneous clickable regions hinders the overall user experience.

In comes Accessibility Checker For Android!

Accessibility Checker is a new Google Research project and it looks specifically for accessibility defects. It will help us automatically find issues like: missing speakable descriptions and incorrectly labeled views. This is available today in both the Espresso(2.2+) and Robolectric testing frameworks.

Setting up Espresso

/**
* Enable Accessibility Checker in Espresso 2.2+
*/
@Test
public void setUp() {
AccessibilityChecks.enable(); // one extra line of code to enable accessibility checks
}

Getting Started with Robolectric

/**
* Enable Accessibility Checker in Robolectric
*/
@Test
@AccessibilityChecks // One line Java annotation to enable accessibility checks
public void testOneButton_shouldAddOne() {
...
}

Resources

For further reading and a more in-depth look at accessible application development in Android please visit Developing Accessible Applications

Out of this conversation came Jekyll Starter Kit, which is a project boilerplate with configurable tools for static site development. These tools provide synchronized cross-device testing with a focus on performance. This is a good starting point for developers who want to build a Jekyll site with fewer layers of abstraction in their tooling.

How it Works

Below is a snippet of the package.json file. With NPM run scripts, you can define strings which will be run on the command line when you invoke the script. For example, you could have a script called “build” that runs other commands. You can also run any Unix or Windows command in the package.json file!

{
  "name": "jekyll-starter-kit",
  "version": "1.0.0",
  "description": "jekyll, asset build using npm scripts",
  "main": "src/scripts/main.js",
  "scripts": {
    "build:jekyll": "jekyll build --config _config.yml,_config-dev.yml",
    "build:js": "npm run eslint && npm run uglify",
    "build:css": "npm run sass && npm run prefix",
    "build:font": "npm run font",
    "build:images": "npm run imagemin",
    "build": "npm run clean && npm run build:js && npm run build:css
              && npm run build:jekyll && npm run critical"
  }
}

Performance

Jekyll Starter Kit strives to give you a high-performance starting point out of the box. By default, your project will have a 99/100 on PageSpeed Insights. You will need to add caching on your server (8 days recommended) to bring it to 100/100.

When designing user interfaces, you must keep things like proper readability, appropriate spacing, line heights, and users with low vision in mind. Accessible typography is one of the most crucial components of design to understand and implement correctly. Designers should be implementing style guides containing typography details, best practices, and standards for components to help bring accessible interfaces to organizations.

Choosing a Typeface

A well-chosen font can give your organization credibility, users increased reading pleasure, and trigger different emotions.

Aesthetics

Make sure the typeface is well suited for the audience it is intended. Think about what each font says to you and make sure it aligns with the goal, organization, or overall mood of the application.

Experiment

Try out the typeface on your design, so you can see it in the context of the structure of your application. Either use software like Sketch to see the changes or if you are working in the browser, create a SASS variable to easily swap out the fonts globally. I find that this is the best way for me to choose fonts.

Read Them

While you are experimenting with different fonts, it is important to read them. Actually read them by spending time reading large amounts of text. You will be able to quickly eliminate fonts that don’t fit by simply doing this one thing.

Trust Your Gut

Sometimes the choice of fonts doesn’t have to be a mostly technical ordeal. Many times you will just see the perfect font for your design when you see it.

Lastly, I suggest using sites like Typ.io to help you find nice font combinations that others are using.

Color & Contrast

Some users with low vision will adjust the contrast levels of their screens. To accommodate for this, designers should ensure that their applications meet WCAG 2.0 level AA requirements at a minimum. This requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text (14 point and bold or larger, or 18 point or larger).

This can easily be verified by using a WebAIM’s Contrast Checker. I also recommend that designers begin the design process by using accessible color palettes.

Most typefaces were designed to be printed with black ink on a light background, so you need to be careful when choosing a typeface reversed out of a dark background. Keep in mind font weight, style, and overall readability when your background is dark.

Line Length

Body Text

The optimal line length for your body text is considered to be 50-60 characters(Baymard). I use the Word & Character Count chrome extension to see how long lines are. Personally, I prefer the characters per line to be between 60 and 80 characters when I am reading.

Short Lines

For short lines, the optimal line length is considered to be about 15-30 characters

Text Styles

Designers should limit the number of text sizes and styles to keep a clean and readable feel to their applications. Frameworks like Bootstrap, Materialize, and Material Design Lite will have base typographic scales already built in for developers. Google recommends having a basic set of styles that are based on a typographic scale of 12, 14, 16, 20, and 34.

For further reading, I would recommend going through Google’s Design Spec and IBM’s Design Language.

Providing students, employees, and the general public with the necessary tools to learn and do their jobs is a moral and legal obligation to every organization. Technology that accommodates all users benefits everyone and makes for a better world.

The principle of universal design states that any document, tool, website, or application should be accessible to users regardless of the instrument (visual browser, screen reader, mobile device, slow internet connection, keyboard-only users, etc.).

Organizations benefit from integrating accessibility practices into their business processes and software development. For example, a digitizer at a library may use an OCR to scan newspapers and then a software developer can provide a searchable document then can be read by a screen reader or create a text transcript of the item. Blind users can then hear information that was once only visual. Users with low reading abilities, poor vision, and language barriers would also benefit from this implementation.

Making systems accessible not only ensures equal access to information but as the above example showed, also benefits users without disabilities by allowing them to customize their experiences.

Today, I have highlighted 12 steps towards Universal Design that can be implemented in your organization today. Enjoy!

Webpage Should Be Keyboard Navigable

The default keyboard navigation order must be logical and intuitive. This generally means that it follows the visual flow of the page – left to right, top to bottom (i.e., header first, then main navigation, then maybe page navigation, and finally the footer).

Create Accessible Forms

Instructions, cues, required form fields, field formatting requirements, etc. should be clearly identified. Many users can only use a keyboard to navigate the web. You must ensure that the forms on your website can be completed using only the keyboard. If either client-side or server-side validation detects errors on forms, then the focus should go to the error elements, alerting a screen reader that there are problems with submission, ensuring usable and accessible error recovery

Don’t Use Color Alone to Convey Information

Web pages should be designed so that all information conveyed with color is also available without color. To test this requirement, there are some browser plugins that remove color from web pages.

Validate Your WebPages

The topics listed here cover the majority of web accessibility issues. However, to ensure that your pages comply with ADA/Section 508 Standards, check them with a free web accessibility checker.
• http://wave.webaim.org/
• http://cynthiasays.com/
• Compliance Sheriff

Avoid Using Frames

Frames are not inaccessible to modern screen readers, but they can be disorienting. If you use frames, give each frame a descriptive title attribute value. Keyboard shortcuts allow the
reader to jump quickly between frames, so brief and descriptive titles are a necessity

Make Scanned Content Accessible Using Full-text Search and OCR

Scanned items such as newspapers should have text transcripts available. OCR technology directly converts scanned paper documents that are laser-printed or typewritten files into editable text.

Caption all Videos

Captions are the text versions of the spoken word presented within multimedia. Although captioning is primarily intended for those who cannot hear audio content, it has also been found to help those who can hear the audio content. For example, non-native language speakers can benefit from captions. Captions should be synchronized with the audio in the multimedia.

Provide Text Transcripts

Transcripts allow anyone who cannot access content from web audio or video to read text instead. Transcripts do not have to be verbatim but should contain additional descriptions, explanations, or comments that may be beneficial, such as indications of laughter or an
explosion. Transcripts also allow the content of multimedia to be searchable.

Ensure Javascript is Accessible

Some event handlers are dependent upon the use of a mouse or keyboard. These are called device-dependent event handlers. Other event handlers are device independent and are triggered by
both the mouse and keyboard or by other means. To ensure accessibility, use a device independent event handler (one that works with both the mouse and the keyboard).

Documents Should be Accessible

PDFs and other office application documents should be accessible. Authors
of accessible PDF documents add descriptive alternate text to page elements that are typically presented not as text but only as visual elements, such as graphics, figures, form fields, and links. When screen readers encounter alternate text, they can interpret the element and read its alternate text description aloud.

Alternate Descriptions Should Be Provided for all Photos and Graphics

When you add images (photos, graphics, logos) to your web page, you must also provide “alternative language tag” (ALT) descriptions for each one. Alt tags for space or design images and images that do not provide content should be empty (alt=” “). Screen readers, Braille displays, and other assistive technologies will relay your alternative text to visitors who use such adaptive devices, providing them with a “comparable experience” to that of sighted visitors. Some browsers will display your ALT descriptions when users run their cursors over the image.

Presentation and Structure Need to Be Separate

Some users input their own custom CSS stylesheets to improve readability. To make this possible, the structure (HTML) of our web pages needs to be separate from our styles (CSS). Users should be able to select fonts, color, margins, and size.

Further Information on Accessibility

I encourage everyone, especially web developers to read and reference the following sources.

• Guide to Web Accessibility
• Mobile Web Best Practices