h1

Krug’s First Law of Usability

November 18, 2009

A great book I have reading speaks about usability and the rules behind it. Don’t Make Me Think, written by usability expert Steven Krug, takes an entertaining and comprehensible route to discussing how usability can be improved on your website.

His first law talks about the idea behind “Don’t Make Me Think”. Basically, users don’t want to apply any more energy or thought into a website than they have to. The user should understand what the website is and its purpose without expending any extra effort to do so. You want to make the website as self’-evident as humanly possible. The user should “get it”.

Don’t make tabs that make us think, even if it’s for a second. Users want to have no extra thought, just click. Make sure your icons are clearly identifiable as icons and are clickable. You don’t want the user to wonder if the icon presented is a button or whether it is just there for design; and whether or not they should try clicking. Although, yes, all it takes is a hover over the icon with your mouse, but that extra thought should not go through their head. Every question that pops into the user’s head adds to their cognitive workload and will distract them from the task intended.

Make things obvious and easy. Your goal as a web designer and developer should be to make each page as self-evident as possible so that when the suser looks at it, they will know what it is and how to use it.

Stay tuned for more rules Krug discusses in his entertaining and informational book on usability.

h1

Remediation

November 4, 2009

Digital media has evolved over the years into what is now natural for us. Back in the 1960’s, multimedia application on websites were not possible nor imaginable. Incorporating video, text, and audio into a website was bizarre and unheard of, but today that is what we know. Remediation, immediacy, and hypermediacy are all components that help understand and weave the old media and new media together.

The movie Strange Days is a great example of  the contradictory and ambivalent ways in which new digital media function for culture today. In the movie, there was a wire which shows cultural moments into the future. This is contemporary virtual reality in today’s world.

In essence, the movie demonstrates the double logic of remediation, which is basically culture wanting to both multiply its media and erase all traces of mediation. Ideally, it wants to erase its media in the very act of multiplying them.

Logic of immediacy is one like virtual reality, where its concept is a disappearing act into a different type of world. Digital graphics and photographs are both forms of immediacy, as they capture an image and display it through a moment of automatic technology.

Hypermediacy is the fragmented, heterogeneity which emphasizes a process or performance rather than a finished art object. Such examples include the windowed style of World Wide web pages, the desktop interface, multimedia programs, and video games. Any type of interactive application is hypermediacy, where ingredients are made up by audio, video, text, images, and animation.

Remediation is where one medium in itself is incorporated in another medium. This is the defining characteristic of new digital media. An example of this is sites containing pictures and text allowed for download. The medium of the website has embedded the medium of pictures. Using one to incorporate into another.  There are several ways of performing remediation, some where you want to erase the medium others want to emphasize the medium and yet aggressive ones want to refashion the older medium entirely. The act of remediation ensures that the older medium cannot be entirely effaced, so the new medium will always depend on the older medium in one way or another.

The process of remediation is constantly being used as new digital media strategies are used to remediate television, films, photography, and painting. New media and old media will have a forever connection as technologies and digital media grows, but remains true to the older.

h1

A Script of My Own

October 21, 2009

For my latest assignment, I was to write a script either for a video or interactive feature. Web writing includes creating preliminary documents to a project, such as an outline, proposal, flowcharts and/or design documents as well as storyboards, scripts, and final documents.

I decided to create a fitness video script. The process began with a clear goal set in mind, to educate and inform women how to properly perfom an arm exercise, specially the dumbbell curl. From this, a clear location and set was determined by thinking it to be an at-home video.

Then I had to plan out what exactly the model would say, where the camera would zoom in/zoomout and its focus points, the angle of the camera, the set directions, and the writing format. Using a linear screenplay format, the fitness video script was produced.

Check out my work: Fit Fashionista Video Series

What do you think? Would this be a video you would be interested in watching?

h1

The Web and Its Components

October 14, 2009

The introduction of internet began around the 1960s, but it wasn’t until early 1990’s that the World-Wide-Web came into existence. The rise of this era was booming technology and innovations. Let’s discuss some of the terminology and the components of the web and how exactly it all comes to play.

There is a significant distinction between the Internet and the World Wide Web. The internet is a network of connected computers where documents can be transferred via e-mail, file transfer (FTP), where these standardized methods for transferring data or documents are known as protocols. The World Wide Web (in short web) is one of the ways that information is shared over the internet. It allows documents to be linked to one another through hypertext link, forming a “web” of information. The protocol used by the web is HTTP (Hypertext Transfer Protocol). This may be familiar to you since it is the first four letters of nearly all web site addresses.

The computer that make up the internet “serve” documents upon request, therefore, are known as servers. It is not the particular computer, but rather the server is the software that allows the computer to communicate with others. In order for the computer to be able to run on the web, it must be running a special server software that allows it to handle HyperText Transfer Protocol transactions. Another name for Web servers is “HTTP” servers. The two most popular software options are Apache (Macs) and Microsoft Internet Information services (within the Microsoft family).

Servin’

Every computer (server) is identified by a unique IP address (Internet Protocol address). For example, oreilly.com has the IP address 208.201.239.37, but thankfully for the Domain Name System (DNS) we can refer to the server as its domain name (oreilly.com). Also, it’s possible to configure your web server to host more than one domain name to a single IP address, allowing several sites to share a single server.

Browsin’

Servers serve, but what about the rest? The software that does the requesting is called the client. On the web, the browser is the client software that makes requests for documents and the server returns the documents for the browser to display. This is all handled via HTTP protocol. Although they have been referred to as “documents”, HTTP can be used to transfer video, audio, images, movies, files and other resources that make up web sites. To most of us, when we think browser, a window on a computer monitor displaying a web page comes to mind. These are called graphical browsers or desktop browsers. The most common are Internet Explorer, Firefox, Safari, Opera, and Netscape.

Side Note: There are also intranets and extranets. Intranet is a web-based network created and used solely within a company. Extranet is like an intranet but allows access to only certain users outside the company. For example, a manufacturing site will provide its customers with an account login and password so they can check the status of their orders.

All-About-URL

URL (Uniform Resource Locator) is the address given to each specific web page. Some are short and sweet, some look like crazy characters, and many are found printed on business cards, buses, trains, etc.

There are three parts to a URL: the protocol, the site name, and the absolute path to the document or resource.

http://http://www.jendesign.com/2007/samples/first.html

1) http://

This defines the protocol and signals the server to get into “web-mode”. (Some are seen at https://- this is because they are secure server transactions that hide delicate content, such as credit card numbers when they are transferred to and from the browser.

2) http://www.jendesign.com

This identifies the domain name. The “www.” is the particular host name at that domain and has become a convention, not a rule. There can be more than one web site at a domain, called subdomains. For example, there also may be development.jendesign.com or clients.jendesign.com and so on.

3) /2007/samples/first.html

This is the absolute path to the requested information or document, first.html. The words are separated by slashes to identify to pathway through directory levels, starting with the root directory of the host, to get to first.html.

In summary, the example URL says it would like to use the HTTP protocol to connect to a server on the Internet named http://www.jendesign.com and requests the document first.html (which can be found in the samples directory, in the 2007 directory).

When searching for a site and the URL is typed in, most commonly will pop up the default file (also known as the index file). The server receives a request for a directory name rather than a specific file, it will automatically add on index.html and will send it back for display. The name of the default may vary depending upon the server and how it is configured; some may show as default.htm. If you are using server-side programming, then the index file may be named index.php or index.asp. The index file is also useful for security.

HTML

HTML (Hypertext Markup Language) defines dozens of elements that make up a document, such as text, headings, paragraphs, and links. Media, audio, images, and flash movies can all be added to HTML as well.

I will be discussing HTML a little further in more detail.

I hope this helped you to dive a bit deeper into the Web and the elements that make it come alive.

Stay tuned for more!

h1

Web Design for Beginners

October 13, 2009

A clip into the how to create your very own site- great HTML tutorial!

Web design seems complicated and tricky, with all those codes and text language that is so unfamiliar to many of us. As a beginner to this design world, I have learned some key skills, tips and tricks from “Learning Web Design”, by Jennifer Niederst Robbins. She exemplifies and makes this crazy HTML language and CSS come alive and simplifies it a to make it much easier to understand and perform.

If you want to learn web design or become a web designer, and if you feel as if you just couldn’t start now, that it was too late in the game for you, well i have got news for you – Absolutely Not! Web design can be learned by anyone, and with this simplicity guidebook, you should be okay.

Depending on your intent, such as blogging for personal or professional, or creating your very own web site for a small business, depends on the materials you will need. There are several core disciplines within the web design process:

Graphic Design: This person will create all the graphics and visual aspects of the site, such as graphics, font, types, color, layout, etc. In this role, it is important to understand and work with Adobe Photoshop, the industry standard. Taking a course or two won’t hurt if you want to pursue this as a career and there are other great books out there to learn more about this in-depth.

Information Design: This person will work with flow charts and diagrams and is in charge of organization of content and how you get to it. Another name for this role is also called an informational architect. Specific courses and additional books can be purchased to learn more. 

Interface Design: This role focuses on how the page works. Qualities such as concept of usability, how easily visitors get to the information they want or need, the general experience of the site, and the function of the interface design. The methods on how you navigate through the site, such as buttons, links, navigation devices, etc. all encompass the elements, function, and organization the interface designer works on. Often, interface design is intertwined in the duties of the graphic designer or in other cases, it is handled by an information designer or interface design specialist.

Document Production: The web design process involves creation and troubleshooting of documents, style sheets, scripting, and images that make up the site. The writing of HTML (the markup language used to create web documents) and CSS (Code Scripting Sheets) is often referred to as authoring, and will be managed by the “production” or “development” team in larger firms. 

Scripting and Programming: This job is handled by programmers or developers. They handle the advanced web functionality such as forms, dynamic content, and interactivity. Web scripts, special programs, and applications are behind the scenes work that this role encrypts, basically the backend development. Traditional computer programming skills are required, but also can be self-taught by copying existing scripts and adding to them on your own.

Multimedia: Flash, animation, video, sound are all elements of multimedia and interactivity. Flash developers and multimedia specialists are sometimes called in for these duties. Macromedia Dreamwaver and Adobe Flash are programs used to design these multimedia elements.

There are a certain number of technologies associated with web development, but it is not a requirement to know all of them. The most basic that you should know is HTML and Cascading Style Sheets.

HTML, know also referred to as XHTML, is the markup language used for identifying and describing the various components of a document, such as headings, paragraphs, titles, and lists. You can easily create your own and try it out through many tutorials on the web, such as the one I have posted above.

CSS (Cascading Style Sheets) describe how you want the content to look. It is the official and standard mechanism for formatting text and page layouts. CSS can also control how documents will be presented in media, other than traditional browsers. It also works as an automated production as you can edit and make changes to all pages through a single style sheet.

JavaScript is a scripting language that is used to add interactivity and behaviors to web pages. It includes things such as checking form entries for validity, swapping out styles for an element, or remembering browser information about the user for next time they visit. DOM (Document Object Model) scripting refers to the standardized list of web page elements that can be accessed and manipulated through JavaScript.

Server-side programming is where programming gets a bit more complex. It enhances web functionality by incorporating applications such as shopping carts, dynamically generated pages, content management systems, databases, and etc. There are various scripting programs that can be used to accomplish, some of which being: CGI scripts (written C++, Perl, Python, or others), Java Server Pages, PHP, VB.NET, ASP.NET, Ruby on Rails, to name a few.  Developing web applications is programmer territory, and not expected for webs designers. However, solutions are offered by purchasing packages that contain shopping carts, guest book, mailing lists, and content management systems without ever having the need to do from scratch.

XML (xTensible markup language) is not a specific language, but instead a robust set of rules for creating other markup languages. It is creating your own data and using it accordingly from then on out. It is a powerful data tool for sharing data between applications. Although XML was developed with web in mind, it is often used behind the scenes on a number of software applications, such as MS Word, Apples iTunes, and Adobe Flash.

Ajax (Asynchronous JavaScript and XML) is a new technique being utilized for creating interactive web applications. The advantage that Ajax offers is that is allows content on the screen to change instantly without refreshing the whole page.

The web design and development process does require certain equipment in order to be possible. Here is a list of necessary equipment:

  • Solid, up-to-date computer
  • Extra memory
  • Large monitor
  • Second computer
  • Scanner and/or digital camera

Software makes it possible for creating web pages and some are designed to make things more simpler. There are many available softwares that can be purchased, but there are also equivocal versions that can be downloaded. Some popular web-authoring programs that provide a visual WYSIWYG (What-You-See-Is-What-You-Can-Get) interface and save you time from typing repetitive (X)HTML and CSS.

Some programs include:

  • Adobe (previously Macromedia) Dreamwaver
  • Microsoft Expression Web
  • Nvu (available at nvu.com)

HTML editors such as TextPad and Adobe Homesite offer a sped up process of writing HTML by hand (as some designers prefer to do so).

Graphics software that allows you to add pictures and web graphics-creation include:

  • Adobe Photoshop
  • Adobe (Macromedia) Fireworks
  • Adobe Illustrator
  • Corel Paint Shop Pro (Windows only)

Several multimedia tools are:

  • Adobe (Macromedia) Flash
  • Apple Quick Time and iMovie
  • Apple Final Cut Pro
  • Microsoft Windows Movie Maker

Internet tools such as different browsers are important to track, view, and transfer files.

These are some of the basics and start-ups to web design and how you can get started. I hope this helps and wish you luck on your design endeavors.

May we be on this journey together! 🙂

h1

The Production Team

October 7, 2009

Chapter 4 discusses the different members that encompass the production team, and make it all possible for the project to be completed and successful.

The writer creates the documents and script, such as proposals, outlines, sitemaps, design documents, and any other form of written material. The tasks that are performed vary project from project, and the needs to be met, as well as budget, and amount of people working on the specific project. The writer may handle only a small portion to handling all the element, some of which being on-screen text, dialogue, story structure, narration, characters, and so forth.

The content strategist will determine the content strategy to be played out, dependent upon the analysis gathered from user’s information needs, technical expertise, favored media, and culture. By researching the client’s goals and needs, the content strategist will gain a better understanding and will present the most effective way of communicating this content for the specific project.

The instructional designer is most concentrated within e-learning, training, and educational multimedia. This is tutorials where a specific subject or skill is taught. The job of the instructional designer is to produce process flowcharts (lay out of sequence and relationship of information) and wireframes (information design of individual screens in rough sketches or prototypes).

The information architect or interactive architect is responsible for the overall structure and navigation of the informational multimedia or web project. This requires some overlapping skill sets of the instructional designer, but instead they are more concerned with making body of information easy to find and use. Same deliverables are required as an instructional designer of process flowcharts and wireframes.

The interface designer is primarily associated with the structure layouts and visual look of a project’s interface, which requires graphic design skills. Sometimes, this position incorporates information architect and instructional designer positions and other times, will be separate.

The game designer is mostly responsible for structure of game play, visual look, and sometimes interface design of the project. This too required graphic design skills.

The usability expert tests the functionality and use of the project from the user’s point of view. Their responsibility is to make sure it is functioning effectively and meeting the client’s goals. This is done through questionnaires, blind testing, surveys, site visits to the user’s location. The usability expert will analyze the results and transcripts and will have a better understanding of the user and their experience.

The subject matter expert is essential to the writer as they are a main reference point for the subject of the project. They will provide reference material, outlines, and will review the writer’s script for accuracy.

The business strategist is similar to subject matter expert, but instead is an expert in the business issues. Their role is usually to write user scenarios, describe typical users, and how they may use the product. This role is most often seen on corporate websites, marketing sites, and e-commerce sites where it is important to understand the client’s goals and how to achieve them.

The art director/creative director/graphic artist plays an important role in the visuals aspect. This role requires creativity and will create visuals, such as background, interface, graphics, screens, animations, etc. These roles work in hand and hand and may work side by side with information architects to deliver visuals that engage the viewer and maximize a positive experience.

The animator is the one that creates the animations, as sometimes this is the best way to present information. It provides a clear explanation of the subject, such as scientific processes. Macromedia flash animation has become an important tool for websites.

The project manager oversees the team and manages the budget, client, schedule, and personnel.

The video/audio director/developer are in charge of developing live-action video or audio. The writer and video/director work together to collaborate content with video, and developer may comment on drafts of the script, and may extend into production. On smaller projects, director and developer may be same person, but larger projects, the director will lead a team of cameramen, editors, lighting technicians, sound artists, actors, etc.

The photographer/videographer is in charge of capturing photo and footage that is necessary for the project. The writer must communicate exactly what images need to be captured, describe the visual needs, and keep in mind the limitations of equipment.

The voice talent and actors are those that perform the script. The writer must listen in when they speak the lines written, and therefore, will help the writer tune the language so it is better suited for the particular speaker.

The programmer/coder writes the codes and program that make it possible for the project to come alive on the computer screen. The writer must establish a good relationship with the programmer so they can better understand the information and story element manipulations that are possible with the tools available for the program.

The product manager works with the client and producing the marketing of the program. This role is sometimes combined with the project manager. If the writer is brought in early, ideas can be thrown around with the product manager, since they are the ones that know the market best and have done their market research.

Depending upon the project size, client, and budget – not all these roles are played out and usually combined. The core creative team is most usually writers, designers, and programmers. The other roles may be extended to many personnel or may be squeezed into the smaller labor available, combining many roles into one. Communication, direction, and development are the fundamentals of a multimedia project and all players on the team work together to produce a successful project/program intended.

h1

Design, Management & Skills

October 7, 2009

Chapter 3 discusses the high-level design, management, and technical skills of interactive writing.

Information architects have the important job of not only designing the program in its structure and navigation, but also must be familiar with current technologies available. The key issues for the architect include organizing the information, identifying the project’s goals and communication, understanding the target audience, deciding how the different categories and subcategories will be linked, and establishing interaction and functionality of the program. The interactive architect has these same duties, but also is responsible for contributing to the user’s experience such as design, interface, usability and applications. These job duties are usually integrated and may serve as the main point person for the project. The deliverables that the information and interactive architect must handle include use cases/user scenarios, content outlines, process flows or sitemaps, and wireframes.

The narrative design of the program defines the major elements and organization of the program which depicts the story structure, characters, role of player, and sequence of interactions. The designer and writer will either work hand in hand with the program’s script, layout, and sequences of scenes, but sometimes the writer comes in after the design is accomplished. With the growing trend of multimedia and knowledge of the writer and multimedia, it is now sometimes a designer-writer that will handle the whole project.

Project management is an important skill to have as many writers become this point person. They must understand and guide the team as well as manage the budget, client, and coordination of all these elements. A writer becomes more valuable once they have several different areas of expertise, as this will help them grow and become a major asset on the team. This include translating a site to a different language, so that it can be an international audience instead of just national.

When working on a project, it is essential to outline and brand the business goals of the client. The best way to do this is through content strategy, by utilizing the most effective ways to present the content. This can be done by understanding the goals of the client, understanding the content that needs to be communicated, the needs and technical skills of the user, and the budget constraints. Depending on what the project entails is what will determine how the content is laid out- via text, graphics, video, etc. Recommending the best way to present the information makes an information architect a valuable employee since they understand this and the ways to organize the information.

A website is created for users and should be easily found when users go to search for this site. Search engines use certain formulas and rankings to create the results in their organic search list. Link popularity and search click-through is important, but the writing on a web site is just as important. Clever writing on the site text, site titles, and meta-tags (the tags that are hidden from the user, but impact the ranking and how the site appears in search engine results) are all elements that impact the way the site will come up in the organic search listing.

Technical skills involved in websites is important for an information architect to have. These skills include flowcharting, which is a way the information is visually laid out. A flowchart organizes the branching structures of a multimedia program and includes functions of design interactions, revisions, character development, a great way to present material to client, communication with other teams, tracking large productions, and to form a basis of the user’s sitemap. Certain symbols are used in a flowchart to minimize confusion and make the chart more useful. Some symbols include decision block (points users to make a choice and sends them to different branch), input/output (enters data), step (a step in a process), document or page (single screen), connector (process or information flow direction, and terminal (beginning and end points of a process).

Pointers of flowchart technique include: 1) give each page a unique number and name, making communication easier, 2)run chart vertically, 30 simplify where you can, 4) write main sections in bold, 5) indicate cross-links and external links as text only, 6) visually indicate pages that have special functions.

There are many different types of software that can be used to flowchart. Some are indicated for PC only, Mac only, and some are integrated for both. Choose a software that works for the team and the client, and one that easily creates and edits flowcharts. Also, the software should be able to export the chart into a standard image format such as JPEG or GIF (this helps to save a lot of time). Lastly, an ideal software converts the chart into an outline and vice-versa as some clients like to see an outline.

Other organizational tools are an outline, storyboard or wireframe. A storyboard/wireframe is an illustration of the main screens of a program or site and explanations of how the elements will work together. It is useful to map out information design on a page/screen level. A WYSIWYG (What you see is what you get) HTML editor, such as Macromedia Dreamwaver, can create web pages that function like a storyboard. These WYSWYG editors allow the user to create pages without having prior knowledge of HTML, a markup language used as the foundation of many web sites.

An understanding and creative knowledge of being able to create web pages gives a writer the leading edge on many projects and prospective job positions. The more knowledge and skills the writer can exemplify, such as narrative design, content strategy, technical skills of formatting and outline, and project management, give a credible and reputable source of acknowledgement and expertise.