User Interface Teams and the Role of the Designer in the Development of Next Generation Web Applications.

For the Art and Design Track

Keywords: User Interface, Design, Open Process Framework, SVG

Peter Schonefeld
SVG Foundation
23016 Lake Forest Drive
Laguna Hills
California
USA
peter@svgfoundation.org


Abstract


As the differences between the web site and the stand-alone program dissolve, the role of the Designer expands and collides with the similarly expanding role of the Programmer. This paper aims at assessing the collision's area of impact and will propose a workflow based on the OPEN Process Framework that will assist Designers and Programmers in collaborating effectively.


Table of Contents


1. Introduction
2. The Next Generation Web Application
3. Every dot at its place
4. The Evolution of The Web Application and the Role of the Designer
5. SVG
6. An example of brains over brawn
     6.1 Scenario 1 - Desktop Application Forms based IDE
     6.2 Scenario 2 - SVG Interface over an Application Layer built with C# or Java
7. Isn’t the term ‘Designer’ a little general for what we’re talking about here?
8. Enter the User Interface Team
9. The OPEN Process Framework (OPF)
10. Challenges
11. Conclusion
12. Reference:

1. Introduction

As a freelance developer servicing a diverse client base, the work that comes my way is varied. I’ve had considerable experience in the web arena, as well as finding myself actively designing and implementing user interfaces for stand-alone desktop applications. In 2001, I ‘discovered’ SVG and immediately began to use this great graphics format in various web applications. I’ve found that the experience of using SVG has opened my mind to a whole range of design and development possibilities that, to my knowledge, do not form part of common practice when it comes to building programs. I also realised that by incorporating SVG into a workflow, a great deal of the User Interface (UI) development could be done by using programs that are found in the Designer’s tool box. In this paper, I will present information and ideas that may assist designers and programmers to better work together in providing the best possible UI outcomes. Included is a description of User Interface Teams as described by the OPEN Process Framework along with an exploration of some of the benefits that may be gained by using SVG to build the User Interfaces that sit at the front end of next generation of web applications.

2. The Next Generation Web Application

There’s currently a large gap in the functionality found between web applications (characterised by client-server components) and desktop applications (typically installed programs). The vision presented here is one of convergence.

XML is a technology that emerged from the web sphere, and yet we find it being used actively in the vast majority of desktop applications being produced today. We also find that application programming environments such as Microsoft .NET and Sun’s Java Platforms are used in the making of both web and desktop applications. Thus, today we have people (primarily programmers) with common skill sets working to develop the data and information processing needs of both web and desktop programs – It seems logical that this meeting of web and conventional technologies will also meet at the front-end of programs. SVG will ‘step up’ to revolutionise the way in which User Interfaces are built.

Is a future of standards based technologies underlying the development of all computer programs wishful thinking? No. This is already happening in the mobile market.

In the not too distant future, the web will merge with our concept of Desktop Applications. This will allow for the emergence of a new type of computer application: The Next Generation Web Application is a program that is more flexible, extensible and has greater access to design.

3. Every dot at its place

The N-Tier system architecture is an approach to building computer programs that can be applied to just about any information system. The main characteristic of this approach is that system architects separate a program’s data needs, application logic (information processing) and presentation into distinct layers of functionality. These layers ‘communicate’ within a system of fixed interfaces giving software makers the opportunity to use the best tools, the best technologies and the most appropriate skills suited to each layer. As shown in figure 1, the idea that you must use a single tool or technology to build a system with an N-Tier architecture is unnecessary -- The best tools should be used for the job and not necessarily the most expensive or feature packed.

NTier.png

Figure 1:

Because N-Tier systems do not put limitations on the technologies used to build applications, they provide a framework from which the next gen app may evolve.

When building to N-Tier architectures, the waters are un-muddied and the crafts people working at leach layer are able to focus their talents to build the best available solution to meet user requirements. For this paper we are interested in those skilled individuals (designers and programmers) who work with the presentation layer of an application, or that part of a computer program that contains the User Interface – the role of the User Interface in an information system being: to provide focus, present information and elicit and manage human response all so that the system may achieve it’s objectives in the most effect way possible.

4. The Evolution of The Web Application and the Role of the Designer

When the web first emerged it was seen primarily as a place to surf for information. Soon, simple HTML forms were coupled with purpose built programs on the web server and the web application was born. Surfing became more than just a link hoping exercise and today, these HTML Web Forms are the interfaces to a massive range of services available on the internet. However, The form of the typical web interface is limited to a handful of input controls or widgets. While this small number of controls provides simplicity, predictability and accessibility to the web experience, we are limited by an inability to more freely express information and interact with the end user.

Desktop applications are diverse creatures ranging from the most elegantly simple program used by millions to the most confounding and complex program with design and function foreign to all but those specialised in a particular problem domain. Where today’s web application is limited to a particular flavour of UI, the UI tools available to the Desktop application developer are flexible enough to allow for sometimes highly specialised and customisable UIs – whatever is need to meet a particular set of requirements. The trade-off is an almost exponential relationship between the complexity of UI requirements and resources in time and skills required to realise various levels of design. Also lacking in the desktop UI development workflow is access to and control by the design professional. Content providers and usability specialists must sit at the sidelines, while the programmers embed immobile bitmap versions of designer output into the UI, in a process akin to applying an iron-on transfer.

Web site development is seen as a happy hunting ground for the Designer. Primarily because the tools in the designer’s arsenal (such as illustration and layout applications) have adapted to become the primary tools used in the development of web interfaces – the designer has much greater access in the workflow for a web site, than they do in the creation of other computer applications. While the design factor is no less important in the creation of desktop applications, such programs are typically built with an Integrated Development Environments (IDEs) -- a set of tools built around a programming language editor and compiler. Using an IDE, the UI is most often built via a drag and drop form designer and it’s virtually impossible to build in any form of interactive behaviour without being seriously immersed in program code.

The developers of the typical desktop application rely on sets of fairly immutable controls (or widgets) provided by the out-of-the-box IDE or as advanced controls from third party vendors. Often the decision to use a particular control is based on a best-fit-possible given what’s available rather than a designed optimum-fit for a particular design. Third party controls available on the market and via Open Source often give projects more flexibility to the desktop developer in achieving a particular design, however the perfect fit may only be achievable by building custom controls in-house. As mentioned above, the development of these custom controls can be resource intensive and this can be a prohibitive factor for many, perhaps the majority of applications. Using best-fit design elements can make it difficult to achieve the best possible form for a UI, not only from a functionality point of view, but often usability and aesthetic qualities are also effected. Figure 2 shows the set of UI controls found within Microsoft’s Visual Studio IDE (for the creation of windows Desktop Applications) laid side-by-side to those controls available to web designers. All functional, but very generic and highly inflexible from a design perspective.

fig2a-wincontrols.png

Figure 2: Selection of Out-of-the Box Windows Controls (from Visual Studio 2003)

fig2b-webcontrols.png

Figure 3: Standard Web Controls (HTML)

When building desktop applications with a conventional IDE, the designer is relegated to the sideline and has little or no control over the final form of a design pieced together with best-fit controls.

5. SVG

SVG is an interactive graphical format that can be utilised to provide for a wide range of 2D UI design elements. SVG is an open XML format in the same family of technologies as HTML. While it’s not a replacement for HTML, it has all of the benefits of HTML and will allow designers and developers to build web front-ends that move beyond the presentation constraints of current web interfaces. If you bring the processing power and program elements of a desktop application into the equation, in addition to the distributed model of internet computing, you have an approach to building software that opens up a whole new range of possibilities.

Through the use of SVG and related XML based technologies at the presentation layer, Designers will have greater control over the layout and interactive features that are presented to the user throughout the life-cycle of an application [from the formulation of requirements, thru prototyping, implementation, maintenance and finally to the retirement of the software]. Improved control means that human interfaces for programs can be optimally moulded to the information requirements and objectives of the application’s problem domain. This increased flexibility over the form of the User Interface is a means of driving innovation in the capabilities of programs and information systems at all layers of the N-Tier architecture.

6. An example of brains over brawn

Figure 3 (below) shows a fantastical custom built UI control developed for use on a mobile piece of field equipment. It’s to be deployed on a machine that uses a touch screen display. Unfortunately there was a typo in the requirements document and the control has been built for a 800 * 600 screen resolution -- the actual machine display resolution is 1024 * 768 pixels. The marketing department also insists that the buttons must have roll-over effects. Deadline for deployment is 4:00pm tomorrow. It’s almost knock off time now.

widgetExample.png

Figure 4: Example Control Widget

6.1 Scenario 1 - Desktop Application Forms based IDE

The following represents a modification workflow using convention methods for developing desktop applications:

Scaling:

The graphic designer who created the images for the buttons and design elements of the gauge control open the original files up in their illustrator package (eg Adobe Illustrator, SodiPodi) and scales them up by about 50% [1 hour] . After exporting each design element individually from the vector format into a raster based graphics program (Gimp, Photoshop), all of the files are renamed to match the file names of the original smaller files (note that you can’t just scale up the original bitmaps due to loss of graphic quality) [1 hour] . The designer emails the images to the programmer and the programmer then spreads out all of the design elements into the new larger format and replaces the images with the new images…this becomes problematic because the graphic display widget (farnarkle view finder) has some screen coordinates hard coded in the program and it takes a couple of hours to get everthing working as it should [2.5 hours].

Roll-overs:

A new image is required for each of the different states so the graphic designer works in their illustration and raster packages to create new buttons. The files are named ‘service_down.bmp’, ‘service_over.bmp’, ‘reset_down.bmp’, ‘reset_over.bmp’ etc. [1 hour] . The files are emailed to the programmer, who has to place these files in the WYSIWYG designer under the appropriate button images and then write some code to manage the user input events [1 hour] . The project is recompiled and a new distribution package is generated [15mins] . One of the files has to be replaced because one of the button labels was misspelled [30 mins] . Testing shows that the new images weren’t included as resources in the DLL (dynamic link library), so the program crashes [30mins] . The problem is fixed and the project is recompiled again and a new distribution package is generated [15mins].

Total time to complete this scenario was 8 hrs. The development team met the target, but it didn’t leave much of a margin for error. The marketing director is angry that his division wasn’t able to review the changes.

6.2 Scenario 2 - SVG Interface over an Application Layer built with C# or Java

The following represents a modification workflow using an SVG powered workflow:

Scaling:

The Designer gets the call and agrees to make the change to the user interface on the spot. She loads up the XML editor and adds a transform=”scale(1.5)” attribute to the outer group element for the control and provides some minor adjustments to the x, y positioning of the newly scaled control [10mins].

Roll-overs:

A highlight SVG filter effect is written that will transform all of the buttons the same way for when the user hovers over a button. A drop shadow effect is also written for the button and this is removed when the user presses a button, giving the impression of depression. To show how the shadow effects are added to the buttons, the following lines of mark-up are added to each of the group elements that contain the buttons, either manually or via an SVG enabled design tool [30mins].

					<set attributeType="XML" 
						attributeName="filter" 
						begin="mouseup" to="url(#fltrBlur)"/>
				

Example 1: Button in ready state with dropshadow effect

					<set attributeType="XML" 
						attributeName="filter" 
						begin="mousedown" to="none"/>
				

Example 2: button down, remove dropshadow effect

Total time to complete this scenario was 40mins. It was a long day, but the designer can go home, safe in the knowledge that the marketing department is able have plenty of time the next morning to review the changes and perhaps suggest some minor enhancements to the colour etc.

In both of these scenarios there are winners and losers. In Scenario 2, the project wins. Unfortunately the designer was working freelance, so she lost out on a few hours of income…but that’s life.

7. Isn’t the term ‘Designer’ a little general for what we’re talking about here?

It sure is! We can apply the title ‘Designer’ to a whole range of roles involved in the development of computer applications including the database design expert; the person who devises the actual structure of a computer program and its object components; and the person who designs the user interface. Even in the web sphere, the term designer can refer to the creator of artwork and the person who ‘cuts the code’. Designer is really a term that could be given to anyone who applies knowledge with the aim of meeting objectives and achieving the most effective result possible. However, in the real world, when a software engineer thinks of ‘The Designer’, they perhaps envision someone who doesn’t program; is versed in the art of commercial print layout and the creation of funky psychodelic graphics. It’s not really helpful to generalise the role of the Designer, just as it’s not useful or correct to categorise a programmer as ‘someone who isn’t creative’. If we take, as an example, those designers who have mastered the Flash authoring environment, there we can see where code has successfully met design. So, to suggest that programmers should stay at the application layer implementing programming logic inside their language editors and also that designers should stick with their illustration and layout packages, there is a noticeable gap in capability. We would have wonderful application back-ends and middle-wares and amazingly designed UIs – but nothing would happen.

8. Enter the User Interface Team

The Interfaces of the layers in an N-Tier architecture provide a stable and reliable means of relaying information around the different parts of an information system. Just as information moves between the human and machine at the User Interface, communication also takes place between the Presentation and Application Layers. Central to the delivery of information to the UI is the process needed to convert the information received from the application layer into a meaningful representation that can be meaningfully be displayed to the human. These UI representations could be graphic visualisations of information such as charts, forms or some other specialised input controls (they may also be presented as audio or multimedia content). To implement the interface between the application and the UI there is need for programming skills, these skills are also required to implement and tie together interactive elements of a design. Thus when considering the design and programming needs of a UI a set of skills is required that may reasonably exceed the limits of a single role – we have programmers working with designers in a User Interface Team.

The simplified version of this team includes the following roles:

Role 1: The form of the computer feedback provided by the UI to the end user should be designed by someone who is versed in the principles of design and layout and who is aware of accessibility needs for computer display and input devices. This role is titled GUI Designer.

Role 2: The creation of graphical, audio or multimedia content that makes up the elements of design is best created by the specialist in those fields. The role is title Content Creator. The content creator can operate with minimal or even no technical knowledge about SVG or programming. They are however, the masters of their tools and (in our SVG world) these tools must export the SVG format.

Role 3: The UI must work with the other parts of the computer program, so a Usability Engineer who is a programmer is required to manipulate the information passed to the presentation layer from the application logic layer, and vice-versa. The Usability Engineer also works with the GUI Designer so that design elements can be rigged to handle user input events or respond in appropriate ways to system error and the like - This relationship is made possible because both the GUI Designer and the Usability Engineer are both familiar with XML, HTML, JavaScript and SVG formats.

9. The OPEN Process Framework (OPF)

The above role descriptions are informal versions of method components found within the OPEN Process Framework; an information repository which is described by it’s co-founder Donald Firesmith as “a customizable open source repository of free reusable process components that can be used to create tailored project-specific processes for developing software-intensive systems”.

There is little risk of overstating the usefulness and comprehensiveness of the OPEN process framework for anyone involved the design and implementation of computer information systems, big or small, simple or complex. The OPF contains process information that will assist in the making of decisions at each layer of the N-Tier architecture. For our purposes, we are able to focus on a narrow branch of the OPF’s classification structure, the User Interface Team. However, before we can formally introduce the User Interface Team, a few key components of the OPF do need to be described. The following descriptions are presented here as they directly appear on the OPF web site:

“Producers – are core method components that models someone or something that performs work units and thereby either directly or indirectly: Produces (e.g., creates, evaluates, iterates, or maintains) versions of one or more related work products; or Provides one or more related services.”

— OPEN Process Frame Work: Producer Method Component (http://www.donald-firesmith.com/)

“Work Products - a core abstract method component that models anything of value that is produced, used, modified, or destroyed during the performance of one or more work units by one or more collaborating producers.”

— OPEN Process Frame Work: Work Product Method Component (http://www.donald-firesmith.com/)

Producers produce Work Products. User Interface Teams are indirect producers, that contain Roles (which are also indirect producers) and produce User Interfaces, which are work products. The direct producers in OFP include the actual people and tools involved.

Equipped with this information the following classification (Figure 4) shows the structure of the User Interface work product and how it relates to the various roles:

UITeam.png

Figure 5: Open Process Framework Classification - User Interface Team (source: http://www.donald-firesmith.com)

As we can see the UI team contains more roles than the few outlined above. However, for the simple workflow discussed here our focus is on the GUI Designer, Content Creator and Usability Engineer. OPF also includes a wealth of other information relevant to UI Team including guidelines, responsibilities, tasks and expertise (for Roles). I urge you to check out the OPF for more information.

It’s important to note that Roles are not mapped directly to a single individual. For large projects, several individuals may play the same role, or in other projects a person may possess skills, knowledge and competency that will allow them to fulfil a number of roles. The means that the User Interface Team is an highly variable entity that moves with the UI needs of the project at hand – this flexibility makes it particularly suited for use in N-Tier Systems and also those projects that will implement SVG based User Interfaces.

10. Challenges

Using SVG to build applications that look and behave less like web sites and more like desktop applications is possible today and is being carried out by a number of parties. But the core technologies are still new, emergent and reliant upon wider adoption by tool makers. Investing in a technology that has not matured is an identifiable risk.

A number of closed and proprietary development environments are being developed and marketed as the next generation of rich client applications, particularly Macromedia Flex and Microsoft’s Longhorn technologies. While, the notion of User Interface Teams and the application of the OPEN Process Framework could be applied to design and development in these new environments, I contend that such closed initiatives will fail in the long-term unless they adopt the XML family of open standards into their feature sets. My reasoning behind this statement is that the strength of N-Tier applications distributed, or otherwise, is that the most appropriate design and most relevant tools for each layer can be used. Common knowledge in the form of XML based web standards can be shared at the interface for each layer, meaning that, at the UI, programmers of many flavours can work with designers--they share a common language.

11. Conclusion

Tools such as the OPEN Process Framework are available to assist User Interface Teams in the realisation of their work products and can also be applied to the emerging technologies surrounding SVG to provide innovative, time saving solutions to the development of application UIs. The presentation at SVG Open 2005 associated with this paper will endeavour to illustrate the flexibility of SVG utilised in this environment.

As a final note, It should be stated that it’s not possible to effectively simplify every desktop application into something that can have a User Interface built entirely by SVG. For the foreseeable future, many applications will require specialised functionality that will only be provided by lower-level programming libraries that are incorporated into programs by programmers. So in the real world there will be an ongoing demarcation in software development between the roles of the designer and programmer that is skewed towards the programmer. However we must realise that design is an important ingredient in the development of application User Interfaces. Design must be treated as a first class citizen in the development workflow and to this end, only Designers and Programmers working together in User Interface Teams will be well placed to overcome the challenges faced by the developers of the Next Generation of computer applications.

12. Reference:

1. W3C (2005), Scalable Vector Graphics: http://www.w3.org/Graphics/SVG/

2. The OPEN Consortium (2005), The Open Process Framework: http://www.donald-firesmith.com

3. Lidwell, Holden, Butler (2003) "The Universal Principles of Design" Rockport USA.

4. Tufte, Edward (1990) "Envisioning Information" Graphics Press USA

5. Donald, Norman (2002) "Emotion and Design: Attractive things work better" http://www.jnd.org/dn.mss/emotion_design_at.html

6. Burgett, Bautte, Pickett, Brown (2002)".NET e-Business Architechture" SAMS, USA.

XHTML rendition made possible by SchemaSoft's Document Interpreter™ technology.