The Medium is the Message; The Future of the User Interfaces

Critical comparison of traditional user interface development and web-based user interface development showing how web-based user interfaces are the future

Abstract
HTML is the most perfect medium available today to build user interfaces for software; compiled programming languages are not and are already being matched in complexity and easy of use by their web based (HTML/CSS/Javascript) rivals. Progress in web based UIs is being fueled by the Renaissance of the XMLHTTP Javascript object, or in more commonly, "AJAX". With a web-based front end interface and C#/ASP.net back end connected via asynchronous AJAX calls over broadband Internet connections, the web based user experience is virtually as seamless as their desktop based rivals.

Designing a UI with C#/Java
The process of creating UI elements in a C# applicaiton is reletlivy simple in itself, but the larger context you'll see how it is inheretnly not suited for this task. Also, I will not go deeply into the symantics of C#. Below is a barebones .net 3.0 windows app written in C#:

using System;
using System.Windows.Forms;

namespace alexegg.com
{
class UI : Form
{
static void Main()
{
Application.Run(new UI());
}
}
}



None of the above code actually defines/configures any element of the UI. All it does is tell the C# language, which is not natively designed to build UIs, that we want this class to have a Windows UI. Lets modify the above skeleton C# windows from to look like the below HTML login screen:



I'll save the HTML for this example for later, now let's look at the C# code required to recreate this simple HTML interface:


using System;
using System.Windows.Forms;

namespace alexegg.com
{
class UI : Form
{
private System.Windows.Forms.TextBox textBoxPassword;
private System.Windows.Forms.Button buttonSubmit;
private System.Windows.Forms.PictureBox pictureBoxLogo;
private System.Windows.Forms.Panel panelDialog;
private System.Windows.Forms.CheckBox checkBoxRemember_me;
private System.Windows.Forms.Label labelPassword;
private System.Windows.Forms.Panel panelDialogBorder;

public UI()
{
this.textBoxPassword = new System.Windows.Forms.TextBox();
this.buttonSubmit = new System.Windows.Forms.Button();
this.pictureBoxLogo = new System.Windows.Forms.PictureBox();
this.panelDialog = new System.Windows.Forms.Panel();
this.labelPassword = new System.Windows.Forms.Label();
this.checkBoxRemember_me = new System.Windows.Forms.CheckBox();
this.panelDialogBorder = new System.Windows.Forms.Panel();
((System.ComponentModel.ISupportInitialize)(this.pictureBoxLogo)).BeginInit();
this.panelDialog.SuspendLayout();
this.SuspendLayout();


//
// textBoxPassword
//
this.textBoxPassword.Font = new System.Drawing.Font("Verdana", 12F, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Point, ((byte)(0)));
this.textBoxPassword.ForeColor = System.Drawing.Color.FromArgb(((int)(((byte)(102)))), ((int)(((byte)(102)))), ((int)(((byte)(102)))));
this.textBoxPassword.Location = new System.Drawing.Point(125, 31);
this.textBoxPassword.Margin = new System.Windows.Forms.Padding(4, 5, 4, 5);
this.textBoxPassword.Name = "textBoxPassword";
this.textBoxPassword.Size = new System.Drawing.Size(150, 27);
this.textBoxPassword.TabIndex = 0;
this.textBoxPassword.UseSystemPasswordChar = true;
//
// buttonSubmit
//
this.buttonSubmit.Font = new System.Drawing.Font("Verdana", 9.75F, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Point, ((byte)(0)));
this.buttonSubmit.Location = new System.Drawing.Point(125, 107);
this.buttonSubmit.Margin = new System.Windows.Forms.Padding(4, 5, 4, 5);
this.buttonSubmit.Name = "buttonSubmit";
this.buttonSubmit.Size = new System.Drawing.Size(66, 29);
this.buttonSubmit.TabIndex = 1;
this.buttonSubmit.Text = "Sign in";
this.buttonSubmit.UseVisualStyleBackColor = true;
//
// pictureBoxLogo
//
this.pictureBoxLogo.Image = System.Drawing.Image.FromFile("resources\tcs_logo.png");
this.pictureBoxLogo.Location = new System.Drawing.Point(258, 49);
this.pictureBoxLogo.Margin = new System.Windows.Forms.Padding(4, 5, 4, 5);
this.pictureBoxLogo.Name = "pictureBoxLogo";
this.pictureBoxLogo.Size = new System.Drawing.Size(106, 107);
this.pictureBoxLogo.SizeMode = System.Windows.Forms.PictureBoxSizeMode.AutoSize;
this.pictureBoxLogo.TabIndex = 2;
this.pictureBoxLogo.TabStop = false;
//
// panelDialog
//
this.panelDialog.BackColor = System.Drawing.Color.White;
this.panelDialog.Controls.Add(this.checkBoxRemember_me);
this.panelDialog.Controls.Add(this.labelPassword);
this.panelDialog.Controls.Add(this.textBoxPassword);
this.panelDialog.Controls.Add(this.buttonSubmit);
this.panelDialog.Location = new System.Drawing.Point(72, 192);
this.panelDialog.Margin = new System.Windows.Forms.Padding(4, 5, 4, 5);
this.panelDialog.Name = "panelDialog";
this.panelDialog.Size = new System.Drawing.Size(475, 162);
this.panelDialog.TabIndex = 3;
//
// labelPassword
//
this.labelPassword.AutoSize = true;
this.labelPassword.Font = new System.Drawing.Font("Verdana", 12F, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Point, ((byte)(0)));
this.labelPassword.Location = new System.Drawing.Point(25, 35);
this.labelPassword.Margin = new System.Windows.Forms.Padding(4, 0, 4, 0);
this.labelPassword.Name = "labelPassword";
this.labelPassword.Size = new System.Drawing.Size(92, 18);
this.labelPassword.TabIndex = 2;
this.labelPassword.Text = "Password:";
//
// checkBoxRemember_me
//
this.checkBoxRemember_me.AutoSize = true;
this.checkBoxRemember_me.Font = new System.Drawing.Font("Verdana", 9.75F, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Point, ((byte)(0)));
this.checkBoxRemember_me.ForeColor = System.Drawing.Color.FromArgb(((int)(((byte)(102)))), ((int)(((byte)(102)))), ((int)(((byte)(102)))));
this.checkBoxRemember_me.Location = new System.Drawing.Point(125, 77);
this.checkBoxRemember_me.Margin = new System.Windows.Forms.Padding(4, 5, 4, 5);
this.checkBoxRemember_me.Name = "checkBoxRemember_me";
this.checkBoxRemember_me.Size = new System.Drawing.Size(235, 20);
this.checkBoxRemember_me.TabIndex = 3;
this.checkBoxRemember_me.Text = "Remember me on this computer";
this.checkBoxRemember_me.UseVisualStyleBackColor = true;
//
// panelDialogBorder
//
this.panelDialogBorder.BackColor = System.Drawing.Color.FromArgb(((int)(((byte)(204)))), ((int)(((byte)(204)))), ((int)(((byte)(204)))));
this.panelDialogBorder.ForeColor = System.Drawing.Color.FromArgb(((int)(((byte)(204)))), ((int)(((byte)(204)))), ((int)(((byte)(204)))));
this.panelDialogBorder.Location = new System.Drawing.Point(60, 180);
this.panelDialogBorder.Name = "panelDialogBorder";
this.panelDialogBorder.Size = new System.Drawing.Size(500, 186);
this.panelDialogBorder.TabIndex = 4;
//
// Form1
//
this.AutoScaleDimensions = new System.Drawing.SizeF(9F, 20F);
this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
this.BackColor = System.Drawing.Color.FromArgb(((int)(((byte)(229)))), ((int)(((byte)(229)))), ((int)(((byte)(229)))));
this.ClientSize = new System.Drawing.Size(622, 415);
this.Controls.Add(this.pictureBoxLogo);
this.Controls.Add(this.panelDialog);
this.Controls.Add(this.panelDialogBorder);
this.Font = new System.Drawing.Font("Verdana", 12F, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Point, ((byte)(0)));
this.Margin = new System.Windows.Forms.Padding(4, 5, 4, 5);
this.Name = "Form1";
this.Text = "Login Form";
((System.ComponentModel.ISupportInitialize)(this.pictureBoxLogo)).EndInit();
this.panelDialog.ResumeLayout(false);
this.panelDialog.PerformLayout();
this.ResumeLayout(false);
this.PerformLayout();
}

static void Main()
{
Application.EnableVisualStyles();
Application.Run(new UI());
}
}
}

Below is the respective HTML + CSS for the exact same UI


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Login Form</title>
<style>
#login_container
{
width:100%;
height:700px;
position:absolute;
background-color:#E5E5E5;
z-index:99;
color:#333333;
font-family:"Lucida Grande",verdana,arial,helvetica,sans-serif;
margin:0pt auto;
padding:0pt;
text-align:center;
}
.login div.cont {
margin:60px auto 20px;
min-width:inherit;
width:500px;
}
div#LogoBox {

}
div#LogoBox img {

}
.login div#Dialog {
background:#FFFFFF none repeat scroll 0%;
border:10px solid #CCCCCC;
padding:15px 20px 10px;
text-align:left;
}
form {
margin:0pt;
padding:0pt;
}
.login dl {
margin:10px 0pt 0pt;
}
.login dt {
float:left;
font-size:14px;
line-height:24px;
width:80px;
}
.login dd {
color:#666666;
font-size:11px;
line-height:24px;
margin:0pt 0pt 5px 80px;
}
.login input#password {
margin-right:5px;
width:150px;
}
.login dd span {
color:#CCCCCC;
}
.login input {
font-size:14px;
}
#Flash.bad {
background:#CC0000 url(images/alertbad_icon.gif) no-repeat scroll left center;
border-color:#CC9999;
color:#FFFFFF;
}
.login #Flash {
font-size:12px;
margin-top:12px;
}
#Flash {
border:1px solid #CCCCCC;
font-size:14px;
margin:0pt 7px 12px auto;
padding:5px 5px 5px 30px;
text-align:left;
}
</style>
</head>
<body>
<div class="login" id="login_container">
<div class="cont">
<div id="LogoBox">
<img alt="Time Critical Solutions" src="resources/tcs_logo.png" /></div>
<div id="Dialog">
<form method="post" action=" ">
<dl>
<dt>Password:</dt>
<dd>
<input type="password" id="password" name="password" />
</dd>
<dd>
<input type="checkbox" name="remember_me" />
Remember me on this computer</dd>
<dd>
<input type="submit" value="Sign in" /></dd>
</dl>
</form>
</div>
</div>
</div>
</body>
</html>

Why is the Java community so far behind the C# community in terms of UI Development (An example of why c based language UI development is inherently wrong)
Designing user interfaces with technologies (HTML/CSS/Javascript) designed for information layout make infinitely more sense then designing interfaces with technologies designed for procedural tasks (compiled programming languages). Even with Microsoft Visual Studio Form Designer, one of the most advanced software interface building applications available today, design and development of UIs is awkward and clunky and almost impossible with the automated code emitted from the form builder. This truth is evident when you take a look at the state of UIs in the Java community. SWING/AWT and a few other tools kits available to the Java community are ill suited and largely inferior to Microsoftnulls solution, which is reflected in the lack of UI progression in the java community. This is a direct reflection of how awkward it is to create compelling user interfaces with c based languages. C# and Java are very similar in syntax and functionally, they can be considered cousins, however then why does the .net/C# community have such more advanced and numerous developed UIs? It's not cause one is more suited to develop UIs or that C# has a larger commuinity using it or that C# is older, but that the .net community has the Visual Studio form designer, a powerful tool to create UIs.

A window on a computer is not good for presenting information with a compelling design. With a pixel based layout, you spend more time writing code to get your content int he right place or to display at all, rather then concentrate on the content and if it looks compelling.

Creating rich UIs with c based languages, is simply too hard. For example, if I wanted to show a little emphasis to an element on my web page, I could just make a quick call to the Highlight method in the Prototype library. However, to do this in a programming environment, I'd have to find some class library with that functionally that works with my language/environment or else I'd have to code that from scratch. In the end you decide it's not even worth it for a little UI garnish.

Explore XAML UIs in .net 3.0