Post: XHTML prototype development-use code to speak

If you are sending standard web pages and ApplicationsProgram(For example, developed using XHTML, CSS, and JS) to design the user experience, there is ample reason to add the XHTML prototype development to your UX tool set. You may have discovered that the traditional wireframes graph function is limited. Maybe you are looking for more powerful ways to create and describe your design scheme; maybe your current job is based on the traditional waterfall model (for example, first create a line chart, then hand it over to the design, then hand it over to the development, and so on ), but you need more synchronous methods, such as agile and iterative development ). Whatever method you use, starting your prototype with XHTML will help you better embark on this journey.

So what does it mean to use XHTML for prototype design and development? In fact, it is the process of generating and determining your design scheme using XHTML and its related technologies. What does an XHTML prototype look like? This problem, as we will see later, actually depends on the steps of prototype development. An XHTML prototype usually looks the same as other web pages created using XHTML, with some demonstration links and features. In other words, you can use XHTML to create a prototype for your website or enterprise applications. We will also see that this method has many advantages over the wiremap or other prototype tools.

An Iterative Process

Because XHTML prototype development is not bound to a specific design stage, iterative development greatly enhances its effect. There are many reasons, but perhaps the most significant reason is that the prototype and subsequent programs constitute a design description. We will also explain this a little bit (see "How to Design XHTML in combination"), but first let's take a look at the whole process of XHTML prototype development. Let's start with a broader design process.

In this (iterative) method, the whole application is not designed before development, but a node (unit) of the program is designed first ), then use this node as the starting point for other program nodes. Like other design methods, the entire design process begins with sketch, which plays an important role in prototype development.

Sketch: a free-form thing

Here, the term "sketch" refers to free development forms that are not restricted by specific technologies. Including creating a line chart (usually multiple redraws) and using specific tools to modify the sketch. When you use the sketch method to help you think or present it to the leaders, once your design ideas have been improved, you will naturally give up the broken line diagrams. However, a prototype product has been developed at this time. In my design team, we found that when using XHTML to develop a prototype, the line frame is redundant and it is much easier to directly turn the sketch into a prototype.

Prototype Method: a clear answer

The prototype corresponds to the sketch. In the words of Bill Barston, the sketch will bring about a problem: "Is this a good idea ?" -The prototype will tell you the answer. With the specific expression of creativity, the prototype method integrates the actual situation of existing product development technologies and the user experience level that can be achieved, and provides a method, make a clear and clear quality evaluation of your ideas.

Prototype Development/build Association

When you use XHTML for development, especially in an iterative model, Development and prototyping are often entangled. If you are creating a prototype for a new application or product, the XHTML prototype is actually just a draft of the actual product in the future. However, when the existing program is designed for upgrade, the version of the existing product can be used as a starting point for the new upgrade solution.

Three levels: structure, behavior, and Foundation)

The XHTML prototype development model is based on the best practice model of the actual website product: first, use XHTML for basic development, then use CSS to add the presentation layer, then add the behavior layer with JavaScript, and then iterate.

We will start from the structural layer.

Structure layer: create the basic structure of the page

The first step in XHTML prototype development is to build a basic structure. Similar to creating a line chart, we first need to show the main content area on the page. The difference is that we use text-based XHTML language to mark.

if our sketch or wiremap looks like this...

Our XHTML may look like this: ... XYZ Application My account Account options Account Details Account help [Footer] ... (We're only displaying the relevant snippet of the XHTML here .)

Next, we add pre-defined detailed content elements to use the appropriate XHTML structure for the corresponding content.

for example, if our detailed sketch looks like this...

We will display the accounthelp topic list as an unordered list (for example, using UL mark ): ... Account help How do I lorem ipsum? How do I dolet Amet? How do I lorem ipsum? More help... ...

By continuing to add detailed content to the page, we actually created a structured content directory for the page. It can serve as a basis for other prototype products. Wireframes mainly reflect the information architecture of pages in a specific layout, but our method is purely structured and hierarchical. In my opinion, it can better express the real information architecture on a web page.

By using XHTML to directly define the information architecture, we can also easily define the attributes related to accessibility. For example, how do users who use screen readers to traverse webpages experience webpages and corresponding content blocks. In addition, it is easier to define elements that are easily overlooked in the online diagram, such as labels in the form.

If you want to view this structural layer in a browser, you will basically see a non-stylized web page, and it will look boring. Although the basic layer does not support the performance layer, the quality of the basic layer will affect the performance layer it supports. Therefore, the quality of the structural layer will seriously affect the overall quality of the website. In fact, ignoring styles is just an important advantage of using XHTML.

Improved performance Layer

With an appropriate structure, we can begin to focus on how to present the content. Let's look at the previous sketches. We already have some layout concepts, so we can start to add content to the structure. In different teams, the methods for developing and creating a look and feel are quite different. It is more cost-effective to design the sample when you use design comps, especially when you are also responsible for the overall brand design, it's like re-drawing a line diagram. Just as a sketch is conducive to the line diagram, the design sample is also conducive to the initial design. However, in actual work, the complete presentation layers are often separated from the technical reality and have to be tailored and applied to webpages in batches, just like painting the exterior walls of a building. In addition, this static method of drawing the appearance of software is difficult to take into account all the dynamic elements on the web page. However, if you use XHTML to develop a prototype, You can greatly improve the appearance implementation level. Users can participate in the design. The quick and rich feedback provided by users can help us gradually improve the page performance layer.

In the past, some problems were hard to reveal when drawing software, but now it becomes obvious. This includes issues between the design scheme and the browser. For example, whether the design should be centered, and more complex issues, such as how to design to adapt to different window sizes and browsing resolutions. For example, can a small window size allow part of the content to run outside the view? Or will the content automatically adapt to the window size? When you use plotting to handle appearance problems, such problems are often invisible, compromising the user experience.

Add behavior layer: less effort

When developing a prototype using XHTML, you design it in the overall environment of the website. These designs will be constantly added to your real-time updated UI library. You are no longer designing for a specific feature, but Google will notify you who has designed and developed similar things, and use these existing things as the starting point of your solution. These things can be all-encompassing, from the date selector to the web control, to those top-level UI ideas that just emerged. In addition, XHTML prototype development can easily integrate or simulate Web2.0 functions, such as built-in controls and content aggregation (Syndication ). If you do not understand JavaScript or other related technologies, you can work with developers to integrate your solutions. Of course, sometimes you cannot find a solution that meets your design needs on the Internet. In this case, you should go back and draw a sketch and work with your team.

Iteration: discovery and Improvement

The true strength of the prototype method is that it is used in the iteration process, that is, when a user interacts with your prototype. In a recent project, we designed a sketch scheme that allows users to drag and drop video files from a library into a playlist. Looking at the static sketch, it looks simple and concise. However, when you drag and drop thumbnails of a video, they find that this action is extremely uncomfortable, especially when you drag and drop a large number of videos. In other words, prototype allows us to discover design problems behind the hidden online block diagram.

The core issue that follows is the use of static graphics to discuss interaction solutions. Static graphics force users to imagine themselves, and all functions are perfect in their imagination. However, with XHTML, We minimize this challenge to users' cognitive abilities, so that they can experience and feel something that is almost a real product.

As long as the user gives feedback, the team starts the next iteration. Another role used to evaluate quality in the original method is added: How fast is the iteration speed? The longer the iteration takes, the lower the prototype value. When using XHTML for prototype development, iteration can be almost fast. First, because the prototype is easy to present to users, it is just a question of publishing a file and then sending a URL. Secondly, XHTML is text-based, and its iteration (such as modifying text or updating basic functions) takes only a few minutes. Even for advanced design modifications, it usually takes less than a few hours.

How to Design XHTML simultaneously

One of the best features of XHTML is self-describing ). The XHTML mark can also be used as a programmer's design description while telling the browser how to display data. Example:

This mark

Will be read

In terms of fashion, we write the "semantic intention" mark (semantically meaningful markup ). That is to say, the tag, named ID, and class we selected can convey their actual meaning and functions.

Annotations are only visible to individuals

Another benefit of XHTML as a design instruction is that the ID and class names can be used as comments for reference. In other words, in your description, the comment in the content area with ID as "account options" will be displayed under the title "account options.

When using a line chart, you can list fuzzy and messy comments at the top of the page by number. This annotation will cause troubles and burden to non-technical readers. However, the XHTML comments are only put in the mark and can only be seen by interested programmers. In addition, because the XHTML file has rich information, you only need to write a brief comment.

More standard, no interference

One of the biggest disadvantages of the wiremap is the lack of standard labels. That is to say, you and I cannot understand each other's graphs. This forces visual designers and programmers to translate our masterpiece. The result is a misunderstanding between the author and readers. To make up for this problem, we need to create a very detailed line chart. We also need to add a long comment to explain the meaning of the graph and explain how the graph elements work. In this way, a large number of instruction documents will be accumulated, and it will become an extreme "labor-intensive" task that cannot be maintained. Once they cannot be updated in time, the entire team will give up this design description, and then there will be various bad things. Compared with the line chart, XHTML provides standard annotations, which can be directly read by anyone who understands XHTML. More importantly, your readers (developers) Use fluent everyday languages to read. In addition, readers who do not pay attention to XHTML can only read the content they pay attention to. All they need to do is open a browser.

Using standard comments means that you will not be limited to specific wireframes or prototype software. You can use various methods, whether it's a simple text editor or a variety of XHTML editing tools. At the same time, the XHTML syntax is refined, not as tedious as the line diagram. In addition, you only need to write text files, and you only need to view the effect through the browser, this will help you work more quickly and efficiently.

Get twice the result with half the effort

If you are new to XHTML, you will find that XHTML can help you get twice the result with half the effort. It takes only a few hours to learn many online tutorials on the Internet, and you can start writing XHTML immediately. (There are two good recommendations: htmldog.com/w3schools.com) and even better, you don't have to worry about those trendy UX tools, so you can gain a deep understanding of this technology that helps you implement creative design.

Divide and conquer

From a blueprint to a sketch, the re-drawing of the line diagram will lead to a series of chain effects, and the assignment of work and schedule of the page or program design will be subject to it. When a rough design is illustrated, one of the team has to work alone for a while and make the sketch design of each page into a line diagram with rich details. However, the XHTML mode provides a divide-and-conquer method. In my team, I may be responsible for the initial part of XHTML and part of CSS, while other members modify XHTML on my basis, add more advanced CSS, and Js. If the solution is jointly proposed by the team, why not let everyone in the team design it together? In other words, if we use someone's point of view to replace the team's solution, why not let everyone contribute their professional knowledge? By using XHTML, we can use closely integrated CSS and js to help team members use a set of Overall Ideas to contribute their own capabilities.

Where to go

Of course, this article is just to stimulate the desires of those interested in the XHTML primitive method. If you want to explore this method in depth, especially those who are in the process of the traditional waterfall model, I suggest you adopt a "small step" strategy. That is to say, first use this method as a prototype, and then experiment with your team on a small project, which serves as the basis. If your experience is similar to mine, you will also find that it is a very powerful addition to your UX toolkit-a more effective way to bridge the gap between "Experience VS technology!