User Interfaces

plain i/f - e.g. terminal-based (command line interface, CLI), GUI - Graphical User Interfaces

Old School v. New School

	Old School	New School
Human-Machine	Text-based terminal (e.g. VT100 - remember this...?!), Command Line Interface (CLI) Proprietary command language Proprietary software, e.g. PC-based that need installation before use	Graphical User Interface (GUI), Web-based, Use of standard web browsers w/o any need for install of proprietary applications Increasingly mobile devices - careful with definition...
Machine-Machine	Proprietary protocols Often with weak security ('security' often depending simply on not anyone knowing the details of the protocol; but easy to listen and learn...)	Standardized protocols, e.g. FTP, HTTP, SNMP, XML; HTTPS, SNMPv3, ... for better security

More Details

Between which Parties	1970s-	1980s	1990s	2000s	2010s
Common type/size:	Mainframes	Mini, Micro/PC	Micro/PC	Micro/PC, Handhelds	Smart phones, tablets
1. Human-Machine Interface (HMI)
a) Command Line	telnet, proprietary (text terminals, vt100 ...)	<<	ssh, proprietary	<<	<<
b) Graphical	Not too many...	Mac, Win, proprietary	HTML, CSS	Cell phones, smart phones	Touch screens everywhere
2. Machine-to-Machine (M2M)
a) Formal	SCADA, Modbus	Era when TCP/IP takes off.	SNMP, HTTP	DNP3	CoAP, MQTT
b) Styles	Client-server, thinner	Client-server, thicker	SOA	SaaS	Messaging (e.g. for IoT)

Hardware Category	(E.g.) Manufacturers	(E.g.) OS(s)	User Interfaces
Supercomputers	Cray, IBM, Fujitsu	Linux, CNK [w]	CLI, GUI
Mainframes [w]	IBM, Unisys	Linux, z/OS, z/VM, z/VSE™, z/TPF. [w]	CLI, GUI
Microcomputers, including Mini, workstations	Apple, Dell, HP	MS Windows, Apple macOS, Linux	GUI
Nanocomputers	Arduino, Raspberry	Linux	CLI, GUI
Mobile computers & devices	Apple, Dell, HTC, Samsung	Android, iOS, Windows Mobile	GUI
Embedded	Essentially ALL major players in all industries...*	uClinux, freeRTOS, QNX, Wind River VxWorks [w,intro, w,list]	CLI, GUI

https://en.wikipedia.org/wiki/List_of_operating_systems

Mobile Computers and Devices, including Stationary/Desktop

Primary focus here is to exemplify and clarify that "mobile" can mean different things to different people.

	Stationary	Mobile Computers and Devices
	Desktops etc	Laptops	Tablets	Smart Phones	Feature Phones	Wearables
Google mobile category (more below)	(N/A)	Mentioned in "Tablets"	"Tablets"	"Mobile"	"Feature Phones"	(Not mentioned)
Screen sizes	17-30"	11-17"	6-9"	4-6"	1-2", lines of text	When have... (e.g. iWatches ~1.5")
Aspect ratios	4:3, 5:4, 16:9, 16:10	4:3, 5:4, 16:9, 16:10	4:3 (iPads,...), 16:9 (MS)	3:2	n/a	5:4 (iWatch)
Default orientation	Horizontal	Horizontal	Vert or Horiz	Vertical	Vertical	'Only one'
Touch screen	Rare	Increasingly common	Yes	Yes	No	Yes
Mouse	Yes	Yes, pad	No	No	N/A	N/A
Stylus, pen	Special use/opt.	Special use/opt.	Some devices, Opt.	No/rarely	N/A/	N/A
For classifications into web interface categories, stationary and mobile web dev
Screens	Large, Medium, Small screens		Medium, Small screens	Mobile screen	Don't care...	Don't care...
Orientation	Fixed (horizontal; typical)		Handle Horiz-Vert swap
Typical nav bar at top	Menubar w/ items			Dropdown button(s)

http://jandp.biz/is/hw/monitors/

https://en.wikipedia.org/wiki/Display_resolution

https://en.wikipedia.org/wiki/Display_aspect_ratio

https://www.google.com/search?q=ipad+aspect+ratio

http://www.theverge.com/2015/7/21/9008741/tablet-shape-aspect-ratio-ipad-android

http://www.iosres.com/index-legacy.html

http://spectrum.ieee.org/static/interactive-the-top-programming-languages-2016

Extract from developers.google.com/webmasters/mobile-sites/mobile-seo/:

3 ways to implement your mobile website

There are three main techniques for implementing a website that can handle view screens of all types and sizes. Here’s a chart comparing the three methods:

Configuration Does my URL stay the same? Does my HTML stay the same?

Responsive Web Design

Dynamic Serving

Separate URLs

Responsive web design: Serves the same HTML code on the same URL regardless of the users’ device (desktop, tablet, mobile, non-visual browser), but can render the display differently (i.e., “respond”) based on the screen size. Responsive design is Google’s recommended design pattern.

Dynamic serving: Uses the same URL regardless of device, but generates a different version of HTML for different device types based on what the server knows about the user’s browser.

Separate URLs: Serves different code to each device, and on separate URLs. This configuration tries to detect the users’ device, then redirects to the appropriate page using HTTP redirects along with the Vary HTTP header.

....

Understand the difference between devices

Mobile: In this document, "mobile" or mobile devices refers to smartphones, such as devices running Android, iPhone, or Windows Phone. Mobile browsers are similar to desktop browsers in that they can render a broad set of the HTML5 specification, although their screen size is smaller and in almost all cases their default orientation is vertical.

Tablets: We consider tablets as devices in their own class, so when we speak of mobile devices, we generally do not include tablets in the definition. Tablets tend to have larger screens, which means that, unless you offer tablet-optimized content, you can assume that users expect to see your site as it would look on a desktop browser rather than on a smartphone browser.

Multimedia phones: These are phones with browsers that are able to render pages coded to meet XHTML standards, support HTML5 Markup, JavaScript/ECMAscript but might not support some of the extension APIs in the HTML5 standard. This generally describes the browser in most 3G-ready phones that are not smartphones.

COMGT: This is a category/classification we typically disregard for now. With capacity increasing, costs going down, and competition in general making devices cheaper and more powerful, we expect the standardization towards a few and quite capable platforms (read Android and iOS) to continue. Including removing any differences between Multimedia Phones and Smartphones. Separation between Multimedia and Smart was more appropriate in the earlier 2010s, 2010-2011.

Feature phones: On these phones, browsers lack the capability to render normal desktop webpages coded using standard HTML. This includes browsers that render only cHTML (iMode), WML, XHTML-MP, etc.

Web

Mobile

Enterprise

Embedded

Multimedia Phone

google.com/search?q=multimedia+phones

One description found at wisegeek.com, What Is a Multimedia Phone?:

A multimedia phone is a cell phone that has at least some capacity to access the Internet, take photographs, and transmit data in addition to making simple voice calls. In common parlance, the phrase “multimedia phone” is often interchanged with “smartphone.” From a technological perspective, however, there is usually some difference between a multimedia phone and a smartphone. Most of this owes to network speed, download and upload capabilities, and bandwidth usage. In many respects a multimedia phone is something of a middle-of-the-road phone: it can do more than a straight features phone, but not as much as a smartphone.

Cell phone service providers typically sell phones and attendant service plans in three categories. A straight features phone or camera phone is usually the most basic model available. This kind of phone can place and answer calls, send and receive text or SMS messages, and snap basic photos in most cases. A multimedia phone is usually the next step up. Phones in the multimedia category are usually able to surf the Internet and access a variety of multimedia content, often including the ability to store and play music.

A phone that is marketed as a “video phone” or “Internet phone” is in all likelihood a multimedia phone. Multimedia phones usually have an array of different media-oriented capabilities. Still, they are designed to be a phone above all else.

At the far end of the spectrum exist smartphones. A smartphone is a phone that acts in many respects like a computer. It can upload and download files from the Internet, and can act as a global positioning system (GPS); it can take videos and then send them on to contacts, or upload them to social networking pages. Video chatting and real-time messaging is usually possible, and apps are constantly being designed to improve phone features and enhance communication capabilities.

It could be argued that a smartphone is, in practice, the most multimedia-ready of all the phones on the market. Nevertheless, the label “multimedia” on a phone usually indicates some lesser degree of technological advancement. The crux of what makes a phone a multimedia phone is usually its operating system, which is typically very basic. Multimedia phones can get on the Internet, but usually at slower speeds; files can be accessed, but not always downloaded. Similarly, content can be viewed, but not usually rapidly shared.

Multimedia phones are good options for people who want the flexibility of mobile Internet access and some enhanced communication, but either do not have the need for — or do not wish to pay for — more advanced services. Most of the time, multimedia plans are more competitively priced than smartphone data plans. They come with less, but they accordingly also cost less.

Older:

Design Considerations

Another section has a good article around contents of web sites, details to consider when designing web user-interfaces - Repeat Customers: It is All About the Experience (INTRANET only).

Importance of Ease-of-Use

On traditional phone vs. computer-based telephony (like Skype) - Ease-of-Use.

Why the Desktop Phone Isn’t Going Away Anytime Soon

Internet Telephony magazine, July 2008, pg. 12

If you’re a very mobile knowledge worker, you may have a Blackberry and a laptop equipped with a telephony or unified communications (UC) client. The laptop with a headset is effectively your phone wherever you have broadband connectivity. When in the office, your desk phone’s primary use may be as a speakerphone. So why not connect a USB speakerphone (e.g. LG Nortel USB phone 8501) to your docking station, and use your PC click-to-call capabilities? If you get a call while your PC is (re-)booting, many UC systems allow you to concurrently ring your cell phone, so you won’t miss any calls. It’s business as usual. This is a perfectly workable solution for highly mobile knowledge workers like myself.

Here’s my three reasons why this may not be for everyone:

#1 Ease of use: users are comfortable with the familiar look and feel of a phone, including use of a handset, hands-free operation, and numeric key pad. IP phones with multi-line (and even color bit-mapped displays) and USB ports have taken this to new levels. IP phones can support corporate dashboards; directories with click-to-call; confer- ence managers with simplified chairman controls; push-to-talk capabilities; zone paging; and visual voicemail. They can support security, weather and IT alerts, travel advisories and company announcements. Finally, the phone, whether wired, cordless or wireless, can be converged with the desktop PC to provide a unified experience.

#2 Reliability/quality: Users want to avoid voice quality impacts during PC background activities, booting and rebooting (e.g. due to security patches) and lack of operation during power failures. They may say, “I want/need a phone to do my job”. While the PC platform is getting better every year, we’re not there for many environments! That said, the PC is a critical business tool – answering the phone while your PC is not available doesn’t necessarily allow you to conduct business in any meaningful way.

#3 Cost: A traditional phone’s TCO is about a few dollars/day, orders of magnitude less than a PC. Basic SIP phones have brought the cost points close to those of analog sets. Also, the costs of moves, adds and changes come down with IP telephony. But, isn’t the incremental cost for IP telephony on a PC close to zero? The answer is not necessarily – what about the cost of headsets which have a relatively limited life expectancy? So the question is generally less about ‘should you invest in phones?’ and more about what’s the right functionality/price, given UC, mobility needs, PC functionality and most importantly job roles and the people that do these jobs.

Tony Rybczynski (News - Alert) is Director of Strategic Enterprise Technologies at Nortel (www.nortel.com). He has over 20 years experience in the application of packet network technology.

References

google frames using css
Historical:
- Who framed the web: Frames and usability www.456bereastreet.com/archive/200411/who_framed_the_web_frames_and_usability/ (Nov 18, 2004)
- CSS Frames: www.456bereastreet.com/lab/cssframes