Interfaces Lecture

Interfaces are everywhere and not just on web pages and cell phones. Here, we will look at interfaces from a wide variety of viewpoints. We will also examine what makes a good or bad interface.

Modified: 2025-04-01 9:49 PM CDST

Use this page to study for Test 3.

• Technology Review's Top Interfaces
  • This 1999 article by Deborah Kreuze listed her top 10 interfaces of the 20th century. Read the article for details. They were:
    • Loudspeaker
      • Go to Reynolds Razorback Stadium to hear an excellent loudspeaker system
    • Touch-Tone Telephone
      • Most of you have never "dialed" a phone but we still use that word
    • Steering Wheel
      • How did you react to the Tesla rectangular steering wheel? See video below:
        • Tesla Rectangular Steering Wheel
        • Now Tesla is charging extra
      • Also see the Mercedes Benz joystick driving system video below
        • Mercedes Benz Joystick Steering (video)
        • $10M Mercedez Joystick steering (video)
          • Experimental interface using two joysticks to steer an automobile.
          • The test driver got used to it quickly but reported some problems in recovering from a skid
          • I believe the steering wheel is not ever likely to be replaced in an automobile driven by humans.
          • However, the steering wheel MAY disappear once self-driving cars take over (video)
    • Magnetic-Stripe Card
      • Notice that retail systems now give you the option of using your magnetic stripe or the embedded chip of your credit or debit card
    • Traffic Light
      • Comedian George Carlin tells joke about red and green lights (video)
    • Remote Control
      • Discussed below
      • FYI: my first remote for a VCR connected by a 12' cord
    • Cathode Ray Tube
      • The original display for TVs and later for computers, recognizable by the thick back
    • Liquid Crystal Display
      • Another early display technology
    • Mouse/Graphical User Interface
      • Replaced command line interfaces (see below for more)
    • Barcode Scanner
      • Universal code for products worldwide invented in 1973
      • FYI: if you are buying old products like Little Golden Books, and they have a barcode, then they are not old
• 2002 Student Interfaces
  • In CS 2002 I asked the class to list some interfaces.
  • Some of them were quite original
    • body armor: stop bullets and knives
    • elevators: many SAU buildings have been retrofitted with elevators
    • shoes: my father-in-law got his first pair of shoes when he went to first grade in Ogden, AR!
    • toilet paper (I'll bet you stocked up back in spring 2020)
    • answering machine (what's that?) : now a cell phone app
    • drive through windows: Covid has amplified these
    • doors: obvious interface
      • FYI: my wife bought a nice corner cabinet many years ago. When she brought it home I asked how she was going to get it in the house. It was wider than any door in the house! I had to temporarily remove and replace a double window to get it into the house!
    • automotive automatic transmission: the newest ones are computer controlled.
    • GPS: where am I?
    • walls: many new homes delete walls to create an open plan
    • cell phone: game changer for sure
• Examples of Interfaces
  • Computer screens
    • GUI (graphical user interface)
    • Command line interface in BASIC:
      • 10 INPUT "ENTER TWO NUMBERS SEPARATED BY A COMMA:
        20 LET S = N1 + N2
        30 LET D = N1 - N2
        40 LET P = N1 * N2
        50 LET Q = N1 / N2
        60 PRINT "THE SUM IS ", S
        70 PRINT "THE DIFFERENCE IS ", D
        80 PRINT "THE PRODUCT IS ", P
        90 PRINT "THE QUOTIENT IS ", Q
        100 END
    • Apple Computer Interface Guidelines for iOS (iPhones and iPads, mostly)
      • Apple provides guidelines for iPhone and Macs
      • Display
        • medium size, high resolution
      • Ergonomics
        • One or both hands, close viewing distance
      • Inputs
        • gestures, keyboards, voice
        • Apps may use: personal data, gyroscope, accelerometer
      • App interactions
        • Usually multiple apps open at once
        • What apps do you use?
      • System features
        • Include: widgets, home screen actions, spotlight, shortcuts, activity view
      • Best practices
        • Limit onscreen controls
        • Make secondary details discoverable
        • Allow appearance to change seamlessly
        • Put controls where they will naturally be accessible
        • With permission, use data on iPhone already rather than requiring redundant data entry
      • More interface factors
      • Clarity
        • Legible text, precise icons, important content highlighted and interactivity obvious
      • Deference
        • Content paramount, blurring and translucency hint at deeper content
      • Depth
        • Hierarchy made obvious by layers, good transitions guide user to discover function
      • Aesthetic Integrity
        • Task determines this factor
        • Serious apps vs games
          • the first should not distract from task
          • the second should immerse the user
      • Consistency
        • An app should not distract by changine display unecessarily
      • Direct Manipulation
        • The user should immediately see the effect of inputs
      • Feedback
        • The app should indicate that an action has taken place
      • Metaphors
        • Apps should take advantage of actions learned in real world
          • desktop
          • files
          • trash cans
          • designers should use metaphors appropriately
      • User Control
        • the user should be in control not the app
        • designers should allow users to directly interact with the interface (e.g., mouse clicks)
      • WYSIWYG (What You See Is What You Get)
        • designers should use WYSIWYG
          • In other words, screen images and hard copy should match
• Real World Interfaces
  • Let's look if these common real world interfaces follow Apple's suggestions
    • Automotive door handles (driver's or left side, USA standard)
      • 1951 Ford,notice how it pulls down and how gravity has affected over its long life
      • HondaCRX.this one invites you to pull it out with your left hand
      • 2003 Dodge Caravan,this one, too, requires your left hand
      • 1999 Chevrolet PU,here you must pull up with four fingers with either hand
      • 2003 VW Beetle, another left handed pull required
    • Remote controls
      • FYI: The design of remote controls really bugs me and many others, see HERE
    • Notice his wall of remotes
    • My cable TV remote looks like his in Figure 4
    • My mother used to keep a flashlight next to her remote, obviously an indicator of bad design
    • He goes on to critique Apple TV's remote and the newer Siri remote
    • He suggests a better design at the end (Figure 17, reproduced below)

    

    • Notice that he adds a separate game controller because watching TV and playing game are distinct tasks
    • Two students mocked up in Play Doh the remote control below
      • Remote Control 1, These next two were student exercises in a previous cognitive science class in designing a TV remote Remote Control 2
        • They made the remote to fit the hand. The ball of the top would move a cursor and the buttons on the side would start or stop actions
      • Sony Remote, The students had not seen this SONY remote before
      • So, the remote control interface is not one easy to design for engineering, conceptual, or esthetic simplicity
  • Tiny houses are another new and complex interface
    • Tiny House Blog, interesting to consider a whole house as an interface and to try to minimize it to its essentials
      • Karen's Cottage only has 450 sq ft of living space (Video)
        • According to this website, the average Arkansas house is 1792 sq ft
    • Tiny House Walkthrough (Video)
    • Can you see yourself living in a tiny house? I cannot.
  • QR codes
    • An interface for phones and computers
    • Most smartphones have software to read QR codes
    • With QR codes you can:
      • go to a web page
      • give someone your "business card"
      • connect to a wireless network
      • send a text
      • send an e-mail
      • call a phone number
      • update your calendar
      • geolocate a latitude and longitude
      • and more
    • A few years ago this class created a fullsize bulletin board display in Peace Hall. It only had QR codes so users had to use their phones to "read" them
    • Notice that QR codes are good example of human-machine interface (HCI)
    • Read this one and do what it says...

  

  • My example above is just a little better than Little Orphan Annie's in Christmas Story (video)
• Wearable computing
  • Smart watches are the biggest member of this category
    • FYI: I resisted getting an Apple Watch but now I like it. I wear it all day and revert to my automatic winding watch at night. The watch face I chose (below) has four "complications" added. These are buttons that I can press.
    • Upper right is weather,
    • lower right is date,
    • upper left is a map,
    • and lower left is sun cycle times.
    • I also use the workout options. I can wear the watch while swimming laps or while taking a walk. BTW the camera makes the face look more beat up than what my eyes see.

My main watch face



My Complications

Weather



Map



Sun



Plan





Current watch face. Note complications: upper left-UV index, upper right-daily temperature range, lower left-blood oxygen, lower right-heart rate

Other complications from Third Party vendors include: Spotify, PCalc, Sleep ++, Map My Walk, Motivation--Daily Quotes, and many more.

2025 Best Complication List

• Traditional Electric Power Meter
  • Electric Meter notice how hard it is to properly read the meter below, the dials spin in different directions
  • Newer meters give a digital readout like the one shown in the inset

    

• Cell Phone Class Exercise
  • One CS class tried to design a smartphone web page for SAU. Which one do you like best?
    • SAU Cell Phone Web Page I
    • SAU Cell Phone Web Page II
    • SAU Cell Phone Web Page III
  • The SAU Web page on an iPhone

  x

  • Users scroll down
  • Apply
    • Tour
    • Give
    • Future Students
    • Current Students
    • Parents and Visitors
    • What would you like to study?
    • News
  • BUT can still not access the Main SAU Web Page

• Exoskeletons (video)
  • Interfaces that amplify human strength and power
• Scene from Alien where she uses an exoskeleton power loader to fight the alien
• Complex Interfaces
• 747 Cockpits: the old one had a flight engineer who sat in the right foreground
  • Old



• New: Notice how nearly all of the analog displays are gone



• Thank you for flying Delta, please be sure you seat backs are in the forward position and you trays are up as we prepare for take off...
• Web Page Design (notice we are moving into USABILITY a future topic)
  • Good Web page design:
    • Is obvious and self-explanatory
    • Is time efficient
    • Focuses attention
    • Shows page functions early
    • Gets to the point
    • Is simple
    • Is not cluttered
    • Organizes, economizes, and communicates
    • Follows conventional standards
    • Tests user experience
• SAU Web page has:
  • moving graphics on front page
  • search function
  • links for job applicants
  • calendar of upcoming events
• Bad Web Page Designs
  • Web pages are one of the main interfaces today.
  • Notice the hallmarks of good design mentioned on that page:
    • provide user feedback
    • easy navigation
    • good color schemes
    • visually appealing
    • clean layout
  • Now notice some of the flaws of the bad designs listed:
    • require instructions
    • too many vivid colors
    • difficult navigation
    • lack of clear description of product
    • blinking interface
    • images that are too small
    • crowded typography
    • hard to read
      • italics should only be used sparingly
    • use of Flash technology (Flash is dead as of 12/31/2020)
    • icons are not links (Susan Collins page)
    • horizontal scrolling required (e.g., must move page <-- and --> to see information
    • unwanted audio with no way to stop it
    • loads too slowly
• Digital Convergence
  • The smartphone as a multifaceted interface
  • Original iPhones for sale
    • Brief history of the smartphone READ this one
      • Oxford Dictionary definition of smartphone: “a mobile phone that performs many of the functions of a computer, typically having a touchscreen interface, internet access, and an operating system capable of running downloaded apps.”
      • Pagers were belt worn small devices that informed you someone was calling your landline phone. They were the precursors, in many ways, to the cellular phone. These were popular with drug dealers :-)
      • Palm Pilot
      • Apple Newton
      • Both were early PDAs (personal digital assistants) everything a smartphone hase except the phone
        • FYI: I have the earliest model of the Palm Pilot in my office

    Flip phones Easyphone for Seniors (note large sized numbers, no, I don't have one, yet. But my younger brother (7 years younger) just bought one. He looked at iPhones but was put off by the facial recognition technology. The salesperson tried to sell him an older model that used fingerprint recognition, but he passed on that too.

    

    Research in Motion's Blackberry (had tiny keyboards). FYI: I had several BlackBerrys did not really care for the tiny keyboards. These did not have touchscreens.

    

    • iPhone
      • "Most importantly, the iPhone reoriented people’s relationship with smartphones. Up to then, they were generally geared toward businesspeople and enthusiasts who saw them as an invaluable tool for staying organized, corresponding over email, and boosting their productivity. Apple’s version took it to a whole other level as a full-blown multimedia powerhouse, enabling users to play games, watch movies, chat, share content, and stay connected to all the possibilities that we’re all still constantly rediscovering." In other words, digital convergence!

    

What cell phone stories do you have?

• The Best Interface is No Interface
  • See the link to Golden Krishna's book of the same title (above)
  • Cooling your car with a smartphone before getting in
    • For Nissan Leaf:
      • Need to remember
      • Need to find the smartphone
      • Need to find the app
      • Need to navigate the app
    • For Mazda car
      • The car does it itself when interior temperature exceeds 75 degrees F.
      • Assumes sun is heating the car
      • Car comes with solar panels
      • Panels power fans that cool the car
    • He concludes: THE BEST INTERFACE IS NO INTERFACE
    • Notice how he differentiates between UI (user interface) and UX (user experience)
      • UI: navigation, menus, buttons, links, shadows, fields, videos, coloring, and much more
      • UX: happiness, solving problems, understanding needs, pleasure, delight, warmth, productivity, and many more
    • Are you starting to see the difference?
  • Obviously, he believes society had gone way too far in creating apps for particular purposes, instead, we should look carefully for more simple and elegant ways to do the things we want to do.
  • FYI: I'm anti-phone apps in many ways and resent when a web page "asks" me to download the app.
  • Think about it, have we become to enamored of our digital interfaces?
• By now, you should have a good idea of the concept of 'interface'

Back to Main Page