Tag: Web design

I’ve expressed dissatisfaction in the past with the traditional tri-pane help format. I think it’s outdated and has gotten such a bad reputation with computer users that it’s too late to change that. So I think it’s time to find other ways to provide user assistance.

A few weeks ago, I got an email stating I was now being followed on Twitter by @helpburner. I thought this could be another technical writer, and I usually check the tweets of people who follow me anyway. Imagine my interest when Mike Stokes, the owner of this account, had tweets mentioning the beta test of a product called HelpBurner.

› Continue reading…

Tags: , , , , , ,

Remembering Forays into Web Design

My first step into Web design was really very primitive and laughable. I was in the Honors version of 2010 English at Utah State University. The 1010 class was your basic writing composition class, and 2010 was the next step up. Both were required as general classes, but I had obtained the equivalent credits in high school. But for the Honors program, I had to take the 2010 English class.

The instructor added a Web dimension to the regular writing assignments by having us design webpages for our essays and other pieces. This was back in the day when the default background color in Web browsers was medium gray. The first page I did had a medium gray background and was done I believe in FrontPage (does that exist anymore?). It was pretty sad by today’s standards. The others I did for that class weren’t much nicer.

› Continue reading…

Tags:

While filing my income tax return online, I noticed that the primary way the website offered user assistance was through questions worded in first person. Each screen provided four to six questions that had to do with that particular screen. This caught my attention partly because I had just been thinking about empathetic user assistance. When I clicked a question, the corresponding information opened in a small pop-up window in the center of my screen.

I’ve wondered how different my job would be if we offered user assistance this way. I like to design some of the user interaction myself, whereas in projects like this tax site I used, it seems like the Web designer took care of that part, and all the technical writer (assuming there was one) did was supply questions and answers to be plugged in.

› Continue reading…

Tags: , , ,

Problem-Centered Design for Documentation

This week, Cameron Moll gave a design presentation to a small group, including our team. He discussed some principles of good versus great design. One of the concepts he brought forward was problem-centered design. As I understand it, a solution-centered design says, “I’ve got this product, so how do I make it do what I want or solve my problem?” Problem-centered design involves focusing on a problem statement to help identify the objective and see the way to design a solution.

I wondered how to implement problem-centered design myself. Applied to documentation, a problem-centered approach seems given to forms like troubleshooting guides and FAQs. The user has a question or problem, so here’s the answer. Simple as that.

I made myself think about it more, though, because if I dismiss it as meaning just troubleshooting or answering questions, I miss a chance to broaden the way I look at what I do and thereby improve it.

› Continue reading…

Tags: , , , , ,

If you’re familiar with Web design principles, you probably know that “click here” links are a no-no. The main reason for this is that they are not helpful for users who rely on screen readers for navigation. A screen reader reads a bunch of “click here” links together as exactly that: “Click here… click here… click here.” So the user doesn’t know what links to follow to get something done.

More descriptive links, such as the name of the target page or a phrase describing a task, are much more helpful. The screen reader is actually telling users what they can do on that page.

Recently, I realized another way that descriptively worded links help is in writing documentation for a site or application. I came across a link in the Web app I was working on that was a hybrid of the two types of links I’ve described. It read something like “Click here to upload a file.” Since Web standards suggest certain appearances for links, we don’t need the “click here to” part, because with any Web experience, users will know that they need to click the link.

But I was writing instructions, and the awkwardness of fitting this link into the instructions made me think about this. Like so:

2. Click Click here to upload a file.

Not real smooth. Even using “select” or “choose” before the link text is awkward.

Your local Web designer ought to know better, but you may need to help her remember that “click here,” though phrased to be specific and helpful, isn’t the best option.

Tags: , ,

A few weeks ago, I received an email from a reader who had performed a study about what Web site visitors believe a good online experience is. More on that in another post. But as a technical writer, when I am documenting software, the design bears as much on my experience as it does on any user. So I think about good application design quite a bit.

I once overheard a Web designer say something to the effect that “if an app is designed well, it doesn’t need help,” meaning a help system.

Say what?

› Continue reading…

Tags: , , , ,

In one of my help projects, I put together styles for the topic titles and headings that visually divides the sections of the topics. Size and font weight aren’t the only things available for making headings stand out and the structure of a help topic understandable for the user. Here’s the styling I used, as well as another style that may help headings visually noticeable.

› Continue reading…

Tags: , , , ,

A Two-Column, Equal-Height Layout with CSS

One thing that puzzles CSS newbies and even intermediates (as it did and still does with me) is how to get the visual layout with CSS that can easily be achieved with tables. A two-column layout where the columns are equal lengths is one such layout. (This assumes columns that are different colors.) As part of this week’s CSS tips, I’ll share how I got mine on this very site.

› Continue reading…

Tags: , , , ,

It feels like a good week to post about CSS and Web design techniques. Today’s suggestion comes from one of the interaction designers I used to work with. A couple of years ago, I was reworking some tutorials and putting them into HTML. Because our designers work in CSS, I decided I needed to learn it. This designer reviewed my CSS for me, and one of the tips he gave me was to declare attributes as high in the CSS file as possible.

One of the objects of CSS is to cut down on the code in HTML files, which increases the speed at which browsers load the pages. You can also reduce the size of your CSS file itself with this technique.

› Continue reading…

Tags: , ,

My job has involved opportunities for some Web design, which helps to satisfy the drive to create. We have a separate team for interaction designers, and they are very talented in using cascading style sheets (CSS) to design their prototypes. When the CSS emphasis was established in the group (the user education team and the interaction design team are what you could call “sister teams”), I took some time to learn what CSS is about and see if I could harness it in developing some HTML tutorials as well as my online help systems.

I really became excited about CSS, and here’s why.

› Continue reading…

Tags: , , ,
Back to top