Reading Responses
Chapter 2. Universal Usability
A basis for universal usability
Usability measures both the quality and experience when using a certain tool, and the better experience one has when using a tool, the more likely they will return to use it again. A universal design is a way to assimilate certain requirements into a design, compared to having an alternate option.
Sidebar: Universal Design Principles
The set of principles by the Center for Universal Design at North Carolina State University’s College of Design include the following four: equitable use, which is meant to provide the “same means of use”, flexibility in use, which allows the design to be accommodating to a wide range of preferences, simple and intuitive use, which allows the design to be easy to use despite the knowledge of the user, and perceptible information, which is effective communication through the physical design of the website.
Universal Usability Guidelines
Universal usability can be defined as the successful usage of information and communications. Functions such as user control, keyboard functionality, and text equivalents are important to keep in mind when designing a website as translating from a computer website to a phone website may not allow for universal usability.
Universal Usability in the Design Process
Simple ways to incorporate universal usability into a design include research via surveys, interviews, focus groups, web analytics, or field studies. Afterwards, you can evaluate and design a website based off what was discovered in the research phase.
Sidebar: The Development Cycle
The development cycle has certain phases to go through before the cite is published: finding the requirements, designing the website, implementing and assembling the cite, then managing the quality control. The best way to move about these phases is the “waterfall” development, in which one phase will be completed at a time before moving onto the next one.
My Response
I found the personas that are created to represent users during the design process to be very interesting and useful. I think it can show how the people who are designing the website may feel more connected to their users if they had a personality, even though these fake profiles were created just for the design process. I think it’s important that there isn’t just an average user, but instead a wide variety of users that may visit the website.
Chapter 3. Information Architecture
Organizing Your Information
If a website doesn’t have a proper organizational foundation, the website itself will not be able to function properly. Organizing information involves creating inventories for existing content, creating a hierarchical outline, “chunking” content into different groups, drawing out diagrams of the structure of the site, and after testing on users, analyzing and revising the organization.
Site Structure
The general success of the organization of a website is based on the models and expectations of the users. Logical and consistent information architecture can allow for users to navigate and find what they need; a poorly organized website can cause difficulty and frustration for users.
Presenting Information Architecture
Planning a website with a team of designers can be easier when there is a shared diagram that can be changed throughout the design process. These site diagrams can visualize the structure, content organization, navigation, and interactive functionality of the website, allowing better communication between the designers.
My Response
I think that the process of organizing the information is very interesting and important to note. Like any major project or essay, organization is key when it comes to starting a project. It’s especially important when working with a team so that the project itself manages to stay on track and organized. Having a shared diagram that can evolve throughout the project is important as well, as there are many times a project doesn’t stay on a single path; it’s normal for plans to change and evolve as the project is worked on.
Chapter 4. Interface Design
Navigation and Wayfinding
In web design, wayfinding requires creating navigation paths, distinct regions, manageable choices, and landmarks that are able to help users navigate the website. Browsing and search functionalities are both important as it can help the user become familiar with the website, as well as contribute to the location and orientation within the website.
Interface Design
A lack of physical cues on a website can make it difficult for the users to navigate the website itself. Icons and explicit cues can help users with understanding the organization and context of the webpage.
Information Design
Websites and web documents can be influenced by physical books when it comes to organization, as their structure is already familiar with many users. Certain factors include identifying an author, having clear titles, dates, and a source.
The Enterprise Interface
A web interface design should be consistent in order to make it easier to understand and use; it’s important for corporations and companies to be organized and structured to separate itself from other competitors.
My Response
I think that it is important that sites are properly organized, especially sites that are meant for a business and may have competitors. I agree with the statement that the usability of a website can impact how companies can stand out to users compared to other competitors.
Chapter 5. Site Structure
Semantic Content Markup
Semantic Markup and separating the document structure is important for the usability and search engine visibility in a website. The semantics of HTML can allow for efficient web coding and information architecture; there is also more adaptability when it comes to different devices.
Site File Structure
Plain-language wording, visible organization and navigation, and modular elements are important when creating a site as it makes it easier to go through the site, and makes it easier to maintain or edit the site later.
Search Engine Optimization
Having an optimized search engine can allow a website to be more visible on search engines; content and links also help a website get a higher ranking on search results.
My Response
The visible structure of a site is very important in making it easy to navigate and use, as well as making it more visible when trying to find it on search engines; I think it’s important to remember that the content of a website isn’t the only factor in a “good” website. Many people would prefer to use websites that are easy to navigate in a way that they’re already used to.
Chapter 6. Page Structure
Site Design in Context
It’s important to remember the broad web environment as well as user expectations when assembling various elements including information architecture or user interface wireframes to avoid prioritizing great content and usability. Incorporating design standards to a website of a large organization can maintain a relationship between the site and the parent company.
Page Structure and Site Design
A literal website is just an amalgamation of different conceptual abstractions that are made up of different pages with shared designs. Elements such as headers, global navigation, search boxes, breadcrumbs, and scan columns are important components of the design of a web page; footers typically have legal information or housekeeping.
Page Templates
The most important part of developing a template for a website is the internal page template because it is what will dominate the experience of the user; the last page designed should be the home page to make sure it fits with the overall site. Navigation and secondary pages should be derived from the internal page template in order to establish a hierarchy throughout the website.
My Response
It’s important that a website, especially one under a large organization such as a university or government agency, should have a web template system. It’s usually agreed that most of these agencies have websites that are hard to navigate or find information; I never realized that an internal web template could help with these chaotic websites.
Chapter 7. Page Design
Document Design
Web documents that we create are meant for different purposes for different formats (print vs mobile vs computer) require different design techniques that include the use of media style sheets, logical document order, selective display, and providing alternatives to ensure universal usability.
Visual Design
Modules and programs are very important in graphic design; a visual hierarchy, clear grouping, and consistent elements can help create a structure and better organization in a web page.
Sidebar: Visual Design Principles
The Gestalt psychologists discovered that the principles of perception, proximity, similarity, continuity, figure-ground relationships, closure, uniform connectedness, and the 1 + 1 = 3 effect form the foundation of modern graphic design and are very important in web design.
Page Frameworks
When designing a web page, fixed-width and flexible width can cause a major difference in user experience. Flexible layouts can adapt to different screens and devices, but it can be difficult for a web page that as a complex structure. Fixed layouts can offer stability but should be used in certain specific cases.
Page Width and Line Length
The ideal line length for a layout is based on a small area of the retina called the macula; reading also slows down for lines with more than twelve words. Longer documents should be divided with hyperlinks, and headers and footers should help users with navigation.
Design Grids for Web Pages
Predictability and consistency are extremely important when designing a web page; grids and templates can help make the design process more efficient while being cost saving.
My Response
I think it’s important to remember that web pages aren’t just strictly about content, but the visuals can also help be more appealing to customers or new users. Even though a flexible layout can be more difficult to design, I even find it frustrating when I open a web page on my phone and it can’t adapt to the phone screen, so I think that a flexible layout is important, especially in modern times when more things can be done from a phone.
Chapter 8. Typography
Characteristics of Type on the Web
Web typography and print typography are different in that there may be lower resolution on a computer screen, but the anti-aliasing can help improve legibility. CSS can help separate content and design, thus allowing for greater typographic control and management of documents of larger sizes, helping with universal usability.
Legibility
On a good web page, good typography should rely on the visual contrast between fonts/words and the text blocks and have white space in order to engage the users; alignment options are also recommended due to the readability. Line length should also be considered in the design process so the users are more comfortable with reading; other typical rules such as paragraph indentation can also help with organization and breaking large chunks of text.
Typefaces
In CSS, designers can choose typefaces to make the entire website have better visuals, but it is generally recommended to use common fonts that are easily legible such as Times New Roman or Georgia for body texts and a sans serif face such as Arial or Verdana for headlines.
Emphasis
Having a display type on a web page can help improve its readability by having visual structure; it’s important to avoid excessive emphasis in texts and to consider the usage of factors such as color and spacing to improve readability.
Display Typography with Graphics
HTMP text is the preferred choice for typography due to its flexibility, but graphics are very important (such as having company logos); alt text should be provided for accessibility, and Adobe Photoshop is mostly used for creating display typography.
Sidebar: Signal to Noise Ratio
Signal-to-noise ratio is a metaphor for communication, emphasizing maximizing relevant information while minimizing distractions; in web design, this is applied by balancing complexity and clarity.
My Response
I think that having a strategy that focuses on working on relevant information and designs and limited distractions is an important key that should be emphasized in any design project or work.
Chapter 9. Editorial Style
Structuring Your Prose
When writing for online users, it’s important to make sure the page is structured and concise for easy readability. When chunks of information are broken up based on topics with a clear header, it can be easier to read and understand or to find a specific piece of information.
Sidebar: Uniform Connectedness
The use of Gestalt principles, such as uniform connectedness, can help visually and structurally improve and organize elements in a document, making it easier to understand for visual or non visual users.
Online Style
It’s important to use concise segments with editorial landmarks such as headlines, subheads, and lists, which can help with searching or entry points. Other stylistic considerations include front-loading content, sticking to the point, developing a specific voice, and using numerals for specific numbers.
Sidebar: Rhetoric and Web Design
Rhetoric involves persuasion through oral, written, and visual media, and can also apply to web design, as ethos (credibility), pathos (appealing to emotions), and logos (logic) can help shape the perceptions about a website of an audience.
Text Formatting for Web Documents
Ways to focus on a website’s structural markup when formatting texts include avoiding excessive links, avoiding purely visual typography and special text characters, and styling sheets in word processors.
Links
Navigational links should be integrated in a way that isn’t distracting to the user, and hypertext links should be used sparingly to avoid disrupting the flow of content
My Response
When focusing on the visuals of a website is important, it’s also important on making sure the content is concise as possible to grab readers’ attention and allow them to easily find what they want. I subconsciously knew to use numerals in some cases, but for some reason I never realized it was because how it stood out to readers as it usually contains a fact or other information.
Chapter 10. Forms and Applications
Technologies that Support Interaction
Basic web interaction involves users clicking links and submitting forms, yet lacks the dynamic feedback and inline guidance. Technology such as Flash, JavaScript or Ajax can bridge this gap, but it can also pose challenges in terms of universal accessibility.
Designing Web Applications
When designing web applications, it’s imperative to focus on system requirements, avoid scope creep, and prioritize simplicity over excessive features. Having recognizable interface conventions and clear guidance can help users navigate and interact with the web application.
The Design Process
Web applications require a rigorous design process compared to web browsing, as there are increased demands on users. In this process, wireframes are crucial as they can offer a low-cost and flexible way to create and modify designs, while prototypes can simulate applications and allow for testing and refining before the design is finalized.
My Response
I think that the design process for web applications is very interesting. The concept of wireframes and physically drawing them out to conceptualize the task flow is very important as it can help with editing or fixing the design, and is a concept that can be found in many different design processes, not just for web design.
Chapter 11. Graphics
The Role of Web Graphics
Graphics are very important in web design as they provide consistent interface and identity across web pages, which can establish a sense of coherence and meet user expectations. Additionally, graphics can serve as content elements, such as illustrations, diagrams, quantitative data, analysis, and integrated visual presentations, in order to enhance understanding and communication.
Sidebar: The Origins of Information Graphics
In the 19th century, diagrams and information graphics originated from various fields such as mapmaking, scientific publishing, mass merchandising, and engineering, and by the early 20th century, publishers like Joseph Pulitzer popularized explanatory diagrams to help the preliterate population understand the industrial age.
Characteristics of Web Graphics
The quality of web graphics is influenced by the user’s personal monitor and network bandwidth, which can impose limits on file sizes and dimensions. Color display, screen resolution, and gamma settings can also affect the visual quality and compatibility of graphics, while bandwidth can impact loading time, so it’s important to balance these two to optimize user experience.
Graphics File Formats
The primary file formats used in web graphics are GIF, JPEG, and PNG. GIF files have efficient compression but have a limited color range, JPEG files are full-color with high color fidelity but use lossy compression, and PNG, although unpopular, have full range of colors, transparency, and text descriptions, but have a larger file size.
Imaging Strategies
Noninterlaced GIF or PNG graphics should be used for small navigation elements, buttons, and design elements, while JPEG format is recommended for photographs and complex images due to its compression. GIF files can be transparent and interlaced, while JPEG can download faster and have better results in terms of photographs and complex images.
Images on the Screen
Creating images can be challenging due to low screen resolution, but the abundance of colors available on screens can help minimize this limitation as it greatly enhances the quality. Pixel grids, resizing limitations, graphic text, and image size to optimize user experience.
Graphics Markup
Height and width tags should be included in the page graphics source tags to quickly specify the space that was allocated for the images, which can allow the browser to layout the page more quickly. Using alt-text to provide alternate text descriptions for images can improve accessibility and allow users to understand the content without seeing the images. Using colored backgrounds and graphics can also enhance the visual appeal and legibility, but using complex backgrounds such as actual images or bright colors can make it more confusing for users.
Sidebar: Color Terminology
Computer screens use an additive color system with red, green, and blue color wavelengths to create an even wider range of colors. In computer graphics, colors are described by hue, saturation, and brightness; color harmonies are based on classic formulas for combining colors in design.
My Response
I think that thinking about the visuals of a website is very important in making it seem more professional; I’ve seen many websites that are either extremely hard to read or just not that pleasing to look at. By having a clean web page with complimenting colors, user experience can be increased.