Journal

Identifying Requirements: Difficult part of design process. Understanding domain area. Understand the users and stakeholders. Determine what your human interface and interaction will be. Techniques to SSNif out whatʼs needed and determine usage scenarios. Imagine the Future.

“The best way to predict the future is to invent it.”

—Alan Kay

Using stories as a design tool: Stories are scenarios. Scenarios are use cases. Use cases can be analyze using task analysis. Task analysis looks at how effectively and efficiently users reach their goals.

You can see that the story is complete when you can observe the different story components lead to a conclusion. Try to incorporate this level of definition and detail in the usage scenarios you create for your designs.

Anatomy of a Scenario: User – This is the central POV from which the user experience unfolds. Stakeholders – A person, group, organization, or system that affects or can be affected by the existence of the user experience. Goal – The planned intent to achieve or bring about a specific result. It is the anticipated result, which guides the actions of the user. Context – The environment or surroundings where the userʼs actions take place. Outcome – The userʼs ability to perform actions after the experience. User Scenarios&hellp;

SSNifs & Requirements: Philip Haine, User Experience Interaction Designer: Situation, Stakeholder, Need, Feature (SSNifs). Stakeholder - User or customer, in some situation. Situation - Context, setting or environment. Need - A condition or situation in which something is required or wanted. “SSNifing”

“SSNiF out the domain to make sense of it”

—Philip Haine

Big SSNifs: Why the product is needed. Little SNNifs: Working out the details. Design Pyramid: Understanding: Research and analysis about customers and their needs. Vision: Sift through the all the Big SSNiFs and sculpt a product vision. Requirements: Play out the Big SSNiFs into lots of little SSNiFs → requirements. Design: Create a solution with the scenarios by walking through the SSNiF scenarios & testing the design.

Use Cases: Originally developed by Ivar Jacobsen to help software developers analyze the way users typically interact with a system. Actors: Any one or thing that interacts with your system. Users, databases, companies, other systems, etc. Use case diagram: Shows how the tasks and actors relate to each other. Use case scenario: Details steps and actors involved for a specific task. Additional use case(s) needed (e.g., extensions). Details steps and actors involved for a specific task.

Task Analysis:: Procedural analysis: Procedures = Steps in a particular task. Job analysis: Job = All tasks part of overall goal or job. Workflow analysis: Workflow = Flow of information and control needed to complete a process. May include multiple people and tasks. Error analysis: Errors = Mistakes that can occur in any of above.

Levels of task analysis for web application. Big picture: Who are the user groups that will use the web application? How (if at all) will they interact with other users? What are they trying to do? Individual page view: What display/view/pages will the user use to accomplish their goal? Procedures in page view: What steps will the user go through on each page view?

Making improvements to tasks:: Consistency: If appropriate, make similar tasks work and look the same. Brevity & clarity: Try to make your tasks shorter if you can do so without sacrificing important functionality. Combined functionality: Reduce redundancy. Are there ways to group tasks? Are there tasks the user does more than once that can be remembered?

Homework & Reading: In your group: Update your Requirements Analysis Reports to include SNNifs. Create a Use Case/Task Analysis report that describes how your application will work. Feature/Functionality specification. Create use cases for all main tasks. Perform task analysis on use case steps. Due start of class, next week. Read chapter 5 in textbook.

This video is so ridiculously and extremely cute. Seriously. You have to watch this. It will put a smile on your face.

Cool comic by Doc Pop, created for the 24-hour Comics Book Day. It’s cute, and has 2 of my favorite things (robots, and Twitter)! [Via Laughing Squid]

Last week was a working session, so Module 7 is moved back to today. Working with PHP and the database. [Side note: Teacher is suggesting we all sign up for Twitter. Uh… done? ;)]

Review of Database Column Types, Using Functions (previous class information). Introduction: Connecting to the Database with PHP. PHP: $dbc = mysqli_connect (hostname, username, password, databasename);. $dbc is short for database connection. If successfully connected this variable will be the reference for all subsequent database interactions within your scripts. PHP: mysqli_connect_error() returns the connection error message. mysqli stands for improved mysql interface, which needs at least versions PHP 6 and MySQL 5 to run. Just need that once. Error checking: Different kind of errors: PHP errors, MySQL errors, SQL errors. Within PHP, there are three different kinds of errors: syntactical (typos stop the script from executing), run time (common if the wrong parameters are sent to a function, your script will still run, page will load, but weird things might happen after submit like a funky error), logical (actual bugs, syntax was coded right, spelled right, but the logic doesn’t quite work right). SQL error types are easiest to deal with: errors report immediately: syntactical, if doing dynamic queries and there is an error, check your PHP. Unable to connect to db is a common error.

Debugging tips: take a break, come back — sometimes staring at it too long just frustrates you. Coming back after a break can help. Check that you’re editing the right page. Check that your latest changes have been uploaded to the server. Check your versions of PHP and MySQL. Older versions might not perform certain functions. You can run a PHP info script to find out what you have. Try a different browser. It can be good to create a general debugging script to include in all your scripts.

Debugging HTML: check the source code, use an HTML validator, add borders to layout pieces, such as divs, test the page in another browser, develop in firefox first, and then test with other browsers, Firefox add ons: Web Developer, DOM inspector, Firebug, HTML validator.

Displaying PHP errors: if your web server doesn’t show PHP errors for some reason in the config, you can create a debug script. ini_set(‘display_errors’, 0); — It will show you your syntactical errors. Keep in mind that this only works if your script will run (up to this command), meaning if the very first line of your script breaks stuff, this won’t work.

Homework: start your JS file for your site. All form pages in your site must have client-side error checking, using the external JS file. Check that all required fields are filled out, has the user entered text in a numeric field? has the user entered a valid email address?

The rest of the semester will be focused on the BIG project (a web application designed as a group). Web application is different than a website. It delivers functionality to a user over an the web. It is interaction-based, more than just information-based.

User Centered Design (UCD) Process: Early focus on users and tasks, Well-defined process, Iterative design, Usefulness (user goals), Ease of use, Learnability, Overall satisfaction. User Experience (UX): Overall experience and level of satisfaction with a given product, system or environment. Human - machine (e.g., calculator). Human - computer (e.g., desktop application, PDA). Human - environment (e.g., real, virtual).

Project: design a class website for teachers/students. Steps: Requirements, conceptual design, mockups & prototypes, production, launch. Within each of these steps, we will be doing evaluation.

Today’s class will focus on requirements analysis. (Phase 1) Purpose/problem: formulate design problem; research & define potential users: user interviews, surveys, research, observation; determine context of use & platform; evaluate existing and competing designs: competitive analysis, heuristic analysis; detail project goals and parameters. EVALUATION.

Phase 2: conceptual design: work out functionality (what the product does), use cases, task analyses, information architecture. EVALUATION.

Phase 3: Mockups and Prototypes: Visual representations (mockups), Interactive representations (prototypes), Produced rapidly, evaluated, refined, evaluated again, etc., Paper prototyping, wire frames, User testing, focus groups, heuristic analysis. EVALUATION.

Phase 4: Production: Final visual design established, Data entry, image creation & software coding, Final product created, Quality assurance (QA), user testing, field testing (does it work the way it’s designed to?). EVALUATION.

Phase 5: Launch: Final testing, Product made live, Verify site correctness. EVALUATION.

Good Design: example: iPod & iTunes. Design Pyramid: Understanding → Vision → Requirements → Design.

“The design we can see and touch is just the tip of the iceberg. It is supported by distinct layers of information and prerequisite decisions.”

— Philip Haine

So Phase 1, Requirements analysis: Understand the problem to solve. Research target audience. Define context of use. Define target platforms. User needs analysis. Perform competitive analysis. Summarize application objectives, features & functions.

Define Target Audience & Purpose (WHY): First step in any design process. Figure out who you want to reach, and WHY. Define them as precisely as possible. Age, gender, nationality, income level, education, occupation, computer experience, etc. [In class, groups coming up with the description…]

Research Target Audience: Learn as much as you can about your audience. Census Bureau. Industry analyses. Survey results. Focus groups. Interviews. Context of Use: Where and when will this application be used? Accessed from home computer in the evenings? Accessed from iPhone on BART during commuter rush hour? Define Target Platforms: Which browsers will our users use? Mozilla/Firefox, Internet Explorer, Safari, cellphone browsers, text-only browsers, others? Which versions of these browsers will they use? What operating systems will they use? What percent of users are likely to use which browsers/versions/platforms? [In class, groups coming up with description…]

Understanding Browser Differences: People use different browsers and platforms. People may have older versions of browsers. Screen resolution. Browsers can have custom settings. Fonts (face, size), Link colors, Image loading, Plug-ins, Scripting, Pop-ups, Others. Browsers deal with web standards differently. CSS1, CSS2, XML, HTML, XHTML, JavaScript, PNG, etc. Comparisons (Safari vs Mozilla vs IE) Check out: http://weblogs.mozillazine.org/hyatt/ and http://www.icab.de/test.html.

What are web standards? The set of standards outlined by the W3C recommendations at: www.w3.org. These include (but are not limited to) specifications about: HTML, XHTML, CSS, PNG, Accessibility standards, XML, XSL and XSLT. Why do I care about standards? Speed of development: Validating code, One target for coding. Simplify maintenance: Separation of content and design (CSS), Logical markup. More access, Access by the disabled, Alternative browsers and platforms. Smaller sites (file sizes), Reduced bandwidth costs, Smaller, reusable code. Take advantage of browser cache. Improved user experience

Web Standards: The Web Standards Project, The World Wide Web Consortium.

User Personas: Build personas for 3 to 5 representative users from your target audience, More diverse audiences need more personas, Conduct interviews and/or surveys using real people whenever possible, Get their permission, Protect their privacy when appropriate, Have them review the data. Photo of user (Should be in the same environment they will use the application (or product). (Photo of Joe the Plumber). User profile data - demographics: Age, Gender, Occupation, Education, Income, Work Hours, Disabilities, Computer, Browser, Browser settings, Network, Technical Skill. User scenario: Typical schedule for your Persona. Sketch or photo of user on location (using a website). See example in Chapter 2

Example schedule: What are their work hours? How do they get to work? When do they use the site? When do they use other sites? What do they do with this web application? Why is it important? How do interactions with others influence their use of the site? What are the relevant exceptions to these events? Context of Use: In what environment they will use the application or product? Are they alone? With others? Does it look noisy? Quiet? How is the lighting? Is the user doing other things? Stakeholders: Who are the stakeholders? Anyone whose affected by the existence of the product or application. End-user, business, partners. What are the business goals? Investment for the long run vs. quick ad-hoc patch. Use this information to generate your project and application/product requirements.

Summarize Application Objectives & Goals: Questions your objectives need to answer: Why are we creating this application? Who is it for & what do they need to do on the application? What are the initial functional features of the application (broad view of what the user will be able to do)? What are the usability objectives of the application?

Competitive Analysis: Find some competing sites that are similar in: Target audience, Platforms, Scope of features, Price, Unique Selling Point. Analyze for strengths & weaknesses: Analyze sites for usability and interface ideas. What categories, labels, features & processes do they use? Steal the good ideas, avoid the mistakes. Copyright law protects Look and feel, Exact wording, Images.

Final project: In class tasks: Choose a group leader, Decide on when to meet outside of class, Further define your target audience, purpose and target platform, Begin competitive analysis. Homework As a group: Conduct a Requirements Analysis and create a report for your group project (BIG project). Define the problem to solve. Research target audience. Define context of use & target platforms. Summarize project & product/application objectives. Perform Competitive Analysis. Due start of class, next week. Reading Assignment: Reading: Read chapter 4 in textbook. SSNiF Analysis Part 1: Introduction, SSNiF Analysis Part 2: How it fits into the product creation process, SSNiF Analysis Part 3: Tips for SSNiFs

I randomly started doing this image of myself, based from a Photo Booth photo I snapped right before doing the illustration. The lighting in the photo caused me to look blue, so it inspired me to abstract it further. I’m a little rusty, I don’t take enough enough time out of my life, lately, to put towards creating non-work-related stuff. However, I still think for something done really quickly, this came out pretty well. I don’t know why I like it so much, but I do!

I love simple sites that inspire me. Check out the newest of these sites that are on my radar: Fifty People One Question is a really cool project brought to you by Crush & Lovely and deltree. The idea is to go to a place, ask fifty people the same question, and film the results. The first up is New Orleans. Watch the video. Think about your own answer, and leave feedback on that site.

Today’s class is just a lab session, so no notes for the day. :)

Most of class is an exercise, not many notes. Field trip: Intuit Usability Lab, Mountain View, CA, Friday, November 14, 2008, 12:30—4:00pm (reschedule November 5 class), transportation provided. Homework: Refined Phone Design. Refine the design of the cell phone based Address Book application. Your report should include: Description of usability test (brief). Target audience description. Facilitator’s instructions to the user (e.g., speak out loud, not testing YOU, testing the design, make fell. comfortable, can stop at any time), Task descriptions, Flow diagram for each showing how the different tasks are accomplished, Screen layout design (can be combined with flow diagram like the example I showed you in class) Summary of your testing answering the question “What did you change or learn as a result of usability testing?” Summary of any pre or post questionnaire you obtained in your testing (place the actual response sheets in an appendix at the end of the report). Word processor for writing the report. Graphics program to generate the screen designs and flow diagrams. Print document of your test report. Name of every member on your team. Number each page of the report. Place a soft copy on the class server. Hand in a hard copy of the report to your instructor. Due at our next class meeting, which is one week after in-class testing. Reading chapters 2&3.

Today’s class is about more MySQL stuff. Apparently next week is midterms. I’m panicking a little. Anyway, here’s the class stuff.

Common functions: SHA1() function: encrypts data, creates a string that is always 40 characters (col length must match), one way encryption, available as of MySQL 5.0.2. NOW(): sets the field to the current time (on server). No spaces between functions. Now() not NOW (). Quotes in queries: In every SQL statement, numeric value should not be quoted. String values must always be quoted. Date and time values must always be quoted. Do not quote functions. Do not quote the term NULL.

Inserting records: Inserting records adds information to the database. There are always 2 ways to write an insert record statement. SQL: INSERT INTO tablename (col1, col2, etc.) VALUES (value1, value2, etc.). SQL: INSERT INTO tablename VALUES (value1, value2, NULL, value3, etc.). If you do not define the columns separately, you must insert a value into every column, even NULL. The first format is usually preferable as it is less error prone . MySQL allows you to insert multiple rows, but it is not a SQL standard.

Selecting data. SQL: SELECT * columns FROM table. The asterisk means select every column in the table. Otherwise, specify columns to be returned. SQL: SELECT column1, column3 FROM table. Increase performance, you choose the order to view data, allows you to manipulate data in the columns with a function. You can retrieve the same column multiple times.

Using Conditionals. SQL: SELECT columns FROM table WHERE conditions(s). Common MySQL operators for where conditions: IS NOT NULL, IS NULL, BETWEEN, NOT BETWEEN, IN, OR (||), AND (&&), NOT (!), =, <, >, <=, >=, !=. Multiple operators can be used together to create complex conditions.

Using LIKE a characters nd NOT LIKE. Searching for an exact string is easier than searching for a string that is similar. Use wild-card: the underscore matches a single character. The Percentage sign matches zero or more characters.

Database design, also known as database structure, data modeling, or database schema. Normalization eliminates redundancies (making sure there aren’t duplicates) in your database and ensures data integrity. Understanding how data is going to be accessed dictates the modeling. Think of questions you might need to know about the data in your site and how you would answer that information, i.e. how many users registered last week. Primary keys and Foreign Keys are integral to creating a normalized database. Foreign keys are the representation in Table B of the Primary Key in Table A. Data in the table might lend itself to a natural primary key, but if not then create an ID. Best Practice: Primary key as the table name plus ID. Example: users_id. Best Practice: Primary key should be an integer for better performance.

Database relationships are how the data in one table relates to the data in another table. There are 3 types of relationships: one-to-one one-to-many, many-to-many. Best Practice: avoid many-to-many relationships, to avoid data redundancy. Use intermediary tables to break down relationships.

Due next week for Midterm:

• Project description
• Site map
• Page site list (indicating templated sections)
• User task flows
 
• Comps
• CSS file
• HTML pages
• Database design document

Format:

• Send a link to the instructor. Should be a functional and well designed static site.
• Create a PDF with project description, sitemap, user task flows, and comps.

Tons of catching up to do. It’s going to be a busy weekend. Yay, starting class with a quiz. Today’s class: paper prototypes.

What is paper prototyping? A method of brainstorming, designing, and testing user interfaces. Many quick iterations are developed, tested and refined. The design team tests the prototype on users by “playing” computer. Storyboard vs. Prototype: What’s the difference? Storyboard are user view mockups. Prototypes are user view mockups with data.

Example prototype: a post it note to design a cellphone’s stop watch, and all it’s functions and status. This is interaction design (figuring out what the sequence of actions are, what’s the response, is it easy to understand and useful?

Paper prototyping testing roles: User (external non-team member): Asked to attempt tasks by “clicking” (touching) the prototype. Computer: Changes the prototype to reflect user’s choices. Stays neutral. Facilitator: Directs the user by asking them to perform tasks, making them feel comfortable, and guiding the session. Observer(s): Take notes on the session.

Scenario & Tasks: Scenario is a story set in real life (“You’re at a party and meet Mary for the first time. You wish to meet up with her to attend the new art exhibit at SFMOMA). A task is an actionable goal that involves steps the user takes to accomplish (e.g., Put Mary in your phonebook).

Facilitator’s script: Greeting & intro to usability study. “Not testing you”. If something is wrong it’s not the testee’s fault, it’s the designer’s fault. “Can stop at any time”. You don’t want them to feel forced. “Speak aloud what you’re thinking”. This is info you need to know for your design.

A pre-test for demographic info and a post test for impressions and suggestions help give you additional data needed for your research. What would they change? It’s like another study in of itself.

Homework assignment: Do a paper prototype for a cellphone interface for an address book. Group project. Be at school on Saturday at 7:30pm in the library.

This month has been a crazy month for me! I went to Sydney, Australia, for Web Directions South, and then the following weekend, I red-eyed it to Atlanta for Webmaster Jam Session. It’s fun, but I’m glad it’s over. Here are a couple highlights:

Web Directions South, Sydney

Sydney is one of the most beautiful cities I have ever seen. And there’s a lot to do. I went whale-watching, I did a helicopter ride over the city, I went to a couple beaches, and even ate kangaroo. I had a blast and would gladly do it again if asked. However, I must admit, Sydney is also a tough crowd. According to feedback on Twitter, people just aren’t into “pie-in-the-sky” CSS 3 future talk. Too bad. :(

Webmaster Jam Session, Atlanta

Can we just say this was the craziest thing I’ve ever done? So after work, I quickly packed a suitcase, and jumped on a plane to Atlanta over night. I arrived at 6:40 AM (read: 3:40 AM PST, where I live), checked into my hotel, showered, got dressed, and went to Day 2 of a conference, and did a live on-stage critique (as part of a massive panel) of websites submitted by conference attendees.

After the panel, I attempted a nap, but was unsuccessful, so I played some rock band instead, until it was about time for my presentation (which was last). I gave the same talk I gave the week before in Sydney, but found that the Atlanta crowd was much more receptive and excited about “future talk”. I was happy about that, and am excited that some of the attendees seemed inspired and positive about it. Check out the slides below. That’s all. Now I have a bunch of catching up to do (email, sleep, school work, and of course work at my job. Thanks to both Web Directions and Webmaster Jam Session for a fun week!

Note: Module 4 is missing because I missed class when I was in Sydney. I’ll track down notes from that class and maybe post them later.

Today’s class is on MySQL. SQL stands for Structured Query Language. it lets you access and manipulate databases. MySQL is a “flavor” of SQL. RDBMS stands for Relational Database Management System. it’s the basis of SQL, and for all modern database systems like MS SQL Server, IBM DB2, Oracle, MySQL, and Microsoft Access. It’s stored in database objects called tables, which has columns and rows, with data. How do we talk to the database? SQL statements talk to them. They’re not case sensitive. Most common statement is the SELECT * from TABLE_NAME. You can have more than one statements at the same time. Semicolons separate them. Asterisk is a good way to search for anything and everything. Results are stored in a result table called a result set. You don’t see a physical table, it’s just like a temporary table where your data is held and you can interact with it.

MySQL is the most popular open source database application. It comes with a database server, different client applications, and several utilities. The server stores the actual data. The client applications used for interacting with the server.

The purpose the web site or application dictates how the database should be designed. When creating databases and tables come up with names (identifiers) that are clear, meaningful, easy to type and easy to remember. Each row in a table is called a record. When naming your tables, only use letters, numbers, and underscores. They shouldn’t be longer than 64 characters, and they must be unique. The column name is local to its table. It’s a good idea, if you can, to keep all column names unique, but easy to remember.

Determine the database’s name (must be unique), the table’s name, and the column names. EAch column needs a data-type. There are three primary types: text (strings), numbers, and dates/times. Within each of the main types are variants. Choosing a column type impacts performance, so it’s good to figure out what type of data you want to use. It is a good idea to include length attributes, to help performance, but be careful to not be too short on the lengths because it can cut off data. Columns can have an empty space. By default, the column will say it’s “null” (no value). You can set it to be NOT NULL (forces the field to have data).

Number types can be marked as UNSIGNED, which forces a column to be a positive number. You can also use ZEROFILL, forcing a column to be padded with zeros. You also need to assign a AUTO_INCREMENT to your primary key. An index is a database’s way of keeping tabs on the data in the records. A key keeps a table normalized, meaning that the data is separated in to unique items. Primary key: an artificial way to refer to a record. Foreign key is usually a linked primary key in another table.

Identify each column type. Choose a subtype for each column. Set the maximum length for text columns. Identify your primary key. Identify which columns cannot have NULL values. Make any numeric types UNSIGNED if not using negative numbers. Establish any default column values. We’ll be using phpMyAdmin (one of the most popular software applications). It’s main use is to connect to a MySQL server. Must be accessed through a web browser.

Class giving it a shot… Homework for next week is to create a table to get the data from the user registration form from the homework last week (which I’m behind on). Basically, matching the fields to the data in the table. In a document (word, or whatever), draw a map of how that data will relate to the fields in the registration form. Finish comps and HTML/CSS for our web apps.

Note: Module 3 is missing because I missed class when I was in Sydney. I’ll track down notes from that class and maybe post them later. Late on homework, too, because of my trip, so have a lot of catching up to do. I’ll get back on track. Also, I’m sick, so if my notes seem more rambley or less coherent than before, apologies. Anyway, here are today’s notes.

Today is about user-centered design, based on don Norman’s the design of everyday things. Critiquing websites students made. User-centered design is designing to facilitate and enhance the user experience. Use constraints to make it clear what actions are available. make things visible, system conceptual model, alternative actions, results of aactions. Make the system state easy to evaluate. Use natural mappings between intentions and required actions, actions and effects, feedback and system state. Make instructions unnecessary or at least easy to remember.

7 ways to make user tasks easier:

1. Use both knowledge in the head and knowledge in the world

   Knowledge in the world makes learning easier, supports the casual or infrequent user. Knowledge in the head: characteristic of the expert user, more efficient than reliance on external knowledge alone.

2. Simplify the structure of tasks

   Don’t stress the short-term memory: minimize irrelevant information, reduce number of choices. Support the long-term memory: good conceptual model, memory aids.

3. Make things visible

   No “mystery meat” navigation, Show users what their options are, Show users where they are, Give feedback about their tasks, Give feedback about the state of the system.

4. Get the mappings right

   Help the user develop an accurate mental model of how the system works. Use natural mappings. Use metaphors, when appropriate: MP3 players use cassette controls, Folders and documents on the computer.

5. Use natural & artificial constraints

   Electrical plugs, CDs, Ethernet cable, USB port. Can you put any electrical plug in any power outlet? Can you put the CD-ROM in upside down? Can an ethernet cable go in the USB port? Constrain user input to do only the right (correct) action. Form validation & valid values to prevent errors.

6. Design to accommodate human error

   Every error that can be made will be made! How will your system deal with it? Help users recover from errors. Help users learn from errors. Don’t leave users stranded

7. When all else fails, standardize

   When only arbitrary mappings are possible, Standards may be very hard to learn, Standards need only be learned once, Famous arbitrary standards. Automobile controls. qwerty. clockwise. Can you think of others?

The User Centered Design Process - How to design a usable user experience.

1. Stage 1: Requirements

   Formulate design problem, Determine target audience, target platforms, user goals, business goals, etc. Evaluate existing and competing designs. Competitive analysis, user interviews, surveys, heuristic analysis. Detail project goals and parameters.

2. Stage 2: Conceptual design

   Work out functionality (what will the product do). Use cases. Task analyses. Information architecture.

3. Stage 3: Mockups & prototypes

   Visual representations (mockups). Interactive representations (prototypes). Produced rapidly, evaluated, refined, evaluated again, etc. Paper prototyping, wire frames. User testing, focus groups, heuristic analysis.

4. Stage 4: Production

   Final product created. Final visual design established. Data entry, image creation & coding. Quality assurance (QA), user testing, field testing

5. Stage 5: Launch

   Final testing. Product or service goes live. Verify product/service correctness

Throughout all these stages is evaluation… evaluation evaluation evaluation. Create feedback systems for each stage.

Iterative design: progressively refine the design, evaluate usability early and often, each version is more usable than the last, evaluate against performance criteria (or benchmarks) - example: 80% of people rate design higher than 6 on a 7 point scale from very obscure to very obvious. plan types of evaluation and number of cycles in advance.

Types of usability. Mining for problems. What are the problems with this design? Criterion testing. Does the design meet our defined goals? Comparison testing. Which of these designs is better? Homework: revise sites (or in my case, just do it.)

Whoa. Through looking at my stats, I happened to find that .net Magazine published my article today. I wrote this article for the April 2008 magazine issue, and today they published it online. I’m very excited to not only find this out, but to also find it featured so prominently on the home page! Very, very cool. Give it a read?

Unrelated Note:
If you haven’t already, please change your RSS subscriptions to my new feed URL: http://feeds.feedburner.com/SushiRobots. Thanks!

Due next week: compare and contrast 2 applications (one being a desktop application, and the other being a web application), Today’s class is a PHP Introduction. PHP is a server-side scripting language for creating dynamic and interactive websites. Open source, free alternative to competitors like Microsoft’s ASP. Often used together with Apache web server (but is not limited to) on various operating systems. PHP Hypertext Preprocessor, original name was personal home page? Web server interprets PHP code, not visible on the client side. Supports database (like MySQL) and may contain text, html tags, and scripts. Can run on different platforms.

<?php is the opening tag and ends with ?>. Can be placed anywhere in the document. Must end with a semi-colon. Two basic statements to output text: echo (more common) and print. Comments: // (single line), and /* … */ (multi-line). In class exercise… (opening Dreamweaver).

Like JavaScript, PHP has variables for storing values, strings, arrays, numbers, function results… Unlike JavaScript, all variables start with a ($) dollar sign. Like JS, variables are alpha-numeric — it can start with a letter or underscore (but not a number). You can have mathematical or logical operators. Case-sensitive. Can use keywords (like return or var) but it’s recommended not to. Single or double quotes are okay, just be consistent. Strings (like in JS). The concatenation operator ( + ) in JS is different in PHP… In PHP it is ( . ) (So “Hello” . “World” instead of “Hello” + “World”). PHP also ignores white space. The strlen() function is used to find a length of a string (counts the number of characters) and can also be used in JS. Example: <?php echo strlen(“Hello world!”); ?> would output 12. Both PHP and JS start counting at 0. Getting string lenghts is often used in functions (for example: counting characters in a URL). The strpos() is used to find the position for a string or character within a string. If match is found, it will return the position of the first match. If it is not found, it will return FALSE. Operators are similar to JS, but not all. There is no ===. Just the two (because it doesn’t need to find the variable type). There is && which means and. || means or. ! means not. += (x+=y) Example: x=x+y.

<?php $myname = “Jina”; echo $myname; ?> will simply output “Jina”.

If else statements are same concept as in JS, but it uses elseif instead of else if. Switch statements concept is also the same, and is a quick way of doing the if else if statements. Break basically says “if this is true, don’t worry about the rest of this function”. While and for loops are similar as well.

Going over different statements (for, while, foreach, etc.). Will go over these in more detail next week. More than 700 built-in functions available. All start with the word “function()”. Name the function so it’s easier to understand what it does. Use curly braces like in JS. You can add parameter in between the parenthesis which is like a holder (like variables). Functions can be also used to return values. arrays can store one or more values in a single variable name. Each element in the array has it’s own ID so it can be easily accessed. Three types: numeric (automatically assign an ID or manually assign an ID), associative (ID key is associated with a value), multidimensional (each element in a multidimensional array can also be an array).

PHP forms use $_GET and $_POST. They can retrieve information very quickly. It’s good to do validation on both the client side and the server side. A database needs the server side to talk to the browser. Without it, it can’t. action=”index.php” means it’s running the code within that file (index.php). Null means there’s nothing there.

Also as homework, create a sticky form (which we just created). Make a list of all the pages that were in the Sitemap (done last week) in HTML. Instructor’s notes will be uploaded by tomorrow night in the directory.

Unrelated Note:
If you haven’t already, please change your RSS subscriptions to my new feed URL: http://feeds.feedburner.com/SushiRobots. Thanks!

Started class with a quiz and handing in homework… Usability on the cheap. Different techniques: formal usability inspection, consistency inspections, standards inspections, guideline reviews, pluralistic walkthroughs, cognitive walkthroughs, heuristic evaluation. Heuristics: rules of thumb or guidelines, what are good practices? Examples: links should be obvious. Text should be easy to read.

Heuristic Evaluation is a usability engineering method for finding the usability problems in a user interface design so that they can be attended to as part of an iterative design process. Heuristic evaluation involves having a small set of evaluators examine the interface and judge its compliance with recognized usability principles (the “heuristics”).

—Nielsen and Molich, 1990; Nielsen 1994

Have multiple people look for issues to catch as many as possible. Brief introduction to Jacob Neilsen’s work, and his mind-changing, and somewhat controversial ideas. His Usability Heuristics:

1. Visibility of system status: keep users informed about what is going on, appropriate feedback.
2. Match between system and real world: speak the user’s language, use familiar, real-world conventions, natural logical order.
3. User control and freedom: let users back out, exit (support undo and redo).
4. Consistency and standards: use standard conventions and language to help users know what to do.
5. Error Prevention: better than a good error message is preventing that error in the first place.
6. Recognition rather than recall: make objects, actions, and options visible. Avoid mystery meat navigation.
7. Flexibility and efficiency of use: accelerators (keyboard shortcuts) speed up the interaction for the expert user, allow users to tailor frequent actions.
8. Aesthetic and minimalist design: avoid irrelevant or rarely needed information, keep things focused.
9. Help users recognize, diagnose, and recover from errors: errors should be in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.
10. Help and Documentation: even if it’s better for a system to be used without documentation, it may be necessary to provide help and documentation. Make it easy to search, focused to the use’s task, don’t be too large.

Exercise: heuristic evaluation of petrosains.com.my. Assignment: do a heuristic evaluation of whitehouse.gov. Organize your report by the 10 heuristics. Use example from appendix in textbook, page 444, and do a professional report. Also do reading assignments.

Unrelated Note:
If you haven’t already, please change your RSS subscriptions to my new feed URL: http://feeds.feedburner.com/SushiRobots. Thanks!

This is just a quick update regarding the new interview that SitePoint posted today in preparation for my upcoming speaking gig next week at Web Directions South in Sydney, Australia. I leave this Friday night, and I’m totally stoked (which is how I get any time I get to visit a new country (or new continent, for that matter). Hope you like the interview, and I look forward to seeing and meeting everyone that’s also going to Sydney!

Unrelated Note:
If you haven’t already, please change your RSS subscriptions to my new feed URL: http://feeds.feedburner.com/SushiRobots. Thanks!

Okay, of all the things I’ve posted that I want, this Robot Lamp Base at Urban Outfitters needs to be in my apartment NOW!!! Make that happen, okay? Thanks!

Unrelated Note:
If you haven’t already, please change your RSS subscriptions to my new feed URL: http://feeds.feedburner.com/SushiRobots. Thanks!

There are a ton of web site design and development galleries out there. Every once in a while, one comes along that actually catches my attention. The most recent of these is MinimalSites.com, a gallery that features beautiful, minimal web site design. There is a lot of inspiration here. Check it out for yourself.

Unrelated Note:
If you haven’t already, please change your RSS subscriptions to my new feed URL: http://feeds.feedburner.com/SushiRobots. Thanks!

Wow. The products on this site, Square Cat Habitat, are not only fun-looking for cats, but are stunning for me. These are something I’d actually be happy to have in my apartment (and I’m sure Zali would be happy, too). The products look very elegant and modern. I might end up putting down a lot of money at this site…

Unrelated Note:
If you haven’t already, please change your RSS subscriptions to my new feed URL: http://feeds.feedburner.com/SushiRobots. Thanks!

Excuse my mess of notes, I might have even typed some of this wrong. Just typing as fast as I can as she moves quickly. Today’s class will go over some JavaScript. Next week we’ll look at PHP. See new syllabus online. Will be quizzed. JavaScript isn’t Java. JavaScript has 2 versions, but we’ll be talking about client-side JavaScript, which means processing is done by the browser, not the server.

JavaScript can put dynamic text into an HTML page, react to events (button click, rollover, etc.), change the content of an HTML element, validate form data (but don’t count on it as the only validation), detect visitor’s browsers, get date/times, get localization, create cookies, etc.

• Use semi-colons at the end of statements for clarity.
• JS is case-sensitive; pay attn to case and spellings, or it can trip you up. var does not equal Var. Var wil not work like var.
• Variables have to be alpha-numeric or have an underscore.
• JS ignores white-space, like HTML.
• Single quotes vs. double quotes: you can use either, just be consistent.
• Naming functions/variables: you can have your own pattern in naming conventions; just be consistent.
• Variable names can’t begin with a number, but can be in the middle or end. Underscores are okay.

The DOM (document object model) can be manipulated with JavaScript.

A javascript statement is a command for the browser; tells the browser what to do. Statement block: the brackets and all in between {}

Variable — contemporary container to store a value. Local (inside a function) and global (at the top of the page). Global: var_x=4, then var_x=2 : 2 would override 4. Local: function cat() { var_x = 4 } only the cat function can use 4. Nothing else. It’s can help to put all the global variables at the top (organization tip). You can even just declare it, and not have to define a value for it. JS reads code from top to bottom, so order stuff in order of how it should be run. If x=2, and then further down x=4, whatever comes after that will read x as 4. Can’t change that unless you write a new function.

Operators: Something to affect the variable, whether you’re assigning it, adding to it, subtracting from it, etc. The (=) [assigning] in var_x=1 is the operator. A (+) [add, can also subtract, multiply, divide], (==) [is equal to], (===) [is equal to, and is an integer]. Structure works the same in PHP.

If/else statements and comparing things. If something happens, then do something else. The “Hi” popup will only happen if x does in fact equal 1. Else if: or if this happens, do this… If x equals 2, do this. Else: otherwise, do this…. If x does not equal 1 or 2, it does this.

(We’re opening up Dreamweaver, and giving it a try…

Formatting: it could go all on one line or indented; personal preference.

A String is text (paragraph, whatever). In quotations. Anything. document.write(“<h1>Hello</h1>”); NaN means “not a number. You can also round, max, and ciel (finding the top range of numbers) with Math: Math.round, Math.ciel, Math.average, etc.

POP QUIZ TIME!

Comments can be single-line (//) or multi-line (/* */). It’s nice to have JS begin with Author name, version, last updated, etc. Instantiating for loops.

Assignment for next week is to decide what your final project (web application) will be, and do a site map (flow diagram) for that project. At least 2 levels deep. Need at least 12 steps (tasks) (not to do one task, but various tasks; signing in, creating an account, etc.. A product catalog of some sort and login for the project is required. With a description of what your project is and what you expect users to do. (Show what happens if a path is successful (logging in) or if it fails (error page), etc. and all the pages planned for the web application).

Also, do assigned reading.

Unrelated Note:
If you haven’t already, please change your RSS subscriptions to my new feed URL: http://feeds.feedburner.com/SushiRobots. Thanks!

Teacher: Kathleen Watson, of Kats Vision. Instructor wants everyone to email her so she has our email addresses. Lots of collaborative projects. If class must be missed, email her. Create a folder with your name in the class server. Buy Usability for the Web, by Tom Brinck, Darren Gergle, and Scott D. Wood. “It’s dated, but the principles hold true”.

Assignments: Example of poor usability, resume (paper version & web site), heurisitc evaluation, phone prototype, phone testing, final project (“the biggie!” — weeks 5—15 — a web application designed from the ground up, with spec documentation which is enough to be handed over to an engineering team).

Optional Usability Workshops (supportive) are Every Friday, Building 180, room 545, 8:30-11:20am. (Now for class introductions)…

Small groups sharing their idea of what usability is. Textbook usability definitions. Qualities of Usability. What Usability involves, why it’s important. Design is everywhere. Take notice of things don’t get designed well How do you turn on the shower?. Which side of the car is the gas tank on? For homework, use BadDesign.com as a guide, and find something designed horribly, and how it could be fixed.

Listening to Talk of the Nation Science Friday clip about bad design/good design.

Unrelated Note:
If you haven’t already, please change your RSS subscriptions to my new feed URL: http://feeds.feedburner.com/SushiRobots. Thanks!

After my class, I have had JavaScript frameworks on the brain. Part of my homework assignment is to read up on a couple. I thought it might be kind of fun to see what the general public thought those two should be, since I know some JavaScript ninjas that have some strong opinions; whatever they may be, they will be far more educated than mine, considering I am a total scripting noob. So I used Twitter to poll my “followers”, just to get a quick grasp of what those opinions are:

“all right javascript folks: I have to read up on a couple js¹ libraries for class. I’ll let majority rule: which 2?”

—Source

After posting this, I definitely got what I asked for (strong opinions, that is). Besides the mini-debates going on regarding which frameworks and libraries were the “best” ones, I also got a surprising amount of negative feedback on using them in general². It reminds me of the very heated debates that go on about CSS frameworks.

Clarification: just as I would prefer to write my own CSS rather than use a pre-baked CSS framework, I also prefer the idea of learning to write my own JavaScript rather than rely on libraries that do the work for me. But that’s not something I can do in one week, and that’s not my homework assignment.

I value all of the opinions that were expressed, and I’ve taken all of the comments into consideration (even the ones that didn’t quite answer my question). Here are few of the various responses I received through Twitter:

“go Mootools for fastest processing and scalability. run the test: http://mootools.net/slickspeed”

—snoebiz

“Easily jQuery and Prototype – both are excellent, both are fundamentally different.”

—kylefox

“writing jQuery won’t help you learn JavaScript. Save that for after the semester. You should learn Prototype and YUI”

—ded

“i’m a fan of jquery, as it makes the connection with css,html (things i know) effortless”

—roxstyle

“jQuery is powerful and quick to learn. YUI has robust UI element and animations. Together they are a powerhouse.”

—jgillick

So which ones did I pick? I did say I would let majority rule. And if I went by the chart I have here (showing all the results gathered), it would look like jQuery (definitely the popular kid in school) and Prototype:

1. jQuery 45.45%
2. Prototype 18.18%
3. Mootools 16.36%
4. YUI 9.09%
5. Dojo 5.45%
6. APE 1.81%
7. Scriptaculous 1.81%
8. Sprout Core 1.81%

However, after I decided to talk to a guy I have worked closely with — a guy with a superhuman JavaScript brain (don’t tell him I said that) — I realized that it makes sense to pick a popular, easy one, and then pick one that was very different, to get a better range of what’s out there. It makes sense to me. So I’m going to read up on jQuery and Sprout Core. Thanks to everyone for the suggestions!

Footnotes

1. Corrected spelling. ↩
2. See Shaun Inman’s response, for one. ↩

Unrelated Note:
If you haven’t already, please change your RSS subscriptions to my new feed URL: http://feeds.feedburner.com/SushiRobots. Thanks!

Edit: Jeff Croft has written a post that is relevant to this topic. While here, I talk about which Frameworks I choose, his post would be the place to comment if you feel strongly against Frameworks in general.

So I was waived out of Typography class (bummer), and then waived out of Web Technology 1 class as well (HTML/CSS). So I’m sitting in Web Technology 2 class. I’m gonna live blog my classes. So here is Day 1.

Teacher: Julia Debari, of Avenue A | Razorfish.

Here come the First Day introductions. We have to answer how comfortable we are with JS, CSS, PHP, and MySQL. Today’s class is just a brief overview of technologies available, as well as going over what we’ll be doing/learning in class.

Final project is a working web application that uses a database and front end presentation layer. Midterm checkpoint. Along with that, we’ll have three mini projects: drop down navigation, template site, and e-commerce mini site. First part of class looks pretty basic. Setting up a web host (with PHP/MySQL, FTP capabilities, Apache, etc.), getting a text editor, brushing up on HTML/CSS. We’re debating web hosts and setting up accounts (unless we already have an account).

Overview of JavaScript libraries. We’re pulling up jQuery’s site, and looking at examples of what could be done using it. Now we’re discussing YUI, and looking at their examples. Now a discussion of AJAX.

Moving on to other technologies: Ruby on Rails, and the way Model View Controller (MVC) works, and what Agile Development means, and “scrum”.

Going back to JavaScript, we’re looking about JSON now. “name value pairs”. Now back to jQuery. Discussing compressed code vs. uncompressed, as well as obsfucation (not recommended for us). She’s throwing words around like constants and variables and functions and constructs and… well, I hope she starts at the beginning with all this stuff. :) She’s showing us jQuery UI. (Saved for later: jQuery for Designers. Chaining.

If we comment our code, we get extra credit.

Homework is to have web hosting set up (done) and read up on a couple libraries and get familiar with them.

Unrelated Note:
If you haven’t already, please change your RSS subscriptions to my new feed URL: http://feeds.feedburner.com/SushiRobots. Thanks!

Some more inspiring art for you guys. I could go broke so easily because of this web site. I love the introductory copy:

“Thumbtack Press offers affordable prints – we’re cheap without looking like it. Plus, you can support starving artists without going broke yourself. No more artsy-fartsy art dealers – get original, professional, top-quality art prints without all the attitude..”

—Source

Unrelated Note:
If you haven’t already, please change your RSS subscriptions to my new feed URL: http://feeds.feedburner.com/SushiRobots. Thanks!

ARTSPROJEKT is filled with curated, fantastic, gorgeous art products, powered by Zazzle. Very inspiring stuff on this web site.

Starting next month (September), I will begin taking classes toward a Master of Fine Arts at the Academy of Art University in San Francisco. This is something I have been wanting to do since I completed my Bachelor of Fine Arts degree at Memphis College of Art — and I feel that it is right at the best time for me.

I received advice from my Social Ethics/Logic professor at MCA in 2006 (the year I graduated) to wait two years before beginning graduate school. She reasoned that I should be more mature and disciplined, and a lot more serious about what I wanted to do. This advice made sense to me, even back then, before I knew that I would be moving to California to work at Apple. Two years later, I not only discovered a fantastic school that offered the right kind of classes I wanted to take, but I also work at a company that supports furthering work-related education by assisting with financial reimbursement. It couldn’t be more right of a time. I’m very excited about this endeavor, and I look forward what I’ll learn and the projects I’ll create.

The classes I will be taking this semester are:

“Typography for Digital Masters. The general fundamentals of traditional typography will be covered in this class, from historical classic fonts to the new classics in the digital arena. This course encompasses appropriate implementation, developing sophisticated type aesthetics and hands-on experimental projects.”

“Principles of Usability This course addresses the basic principles of usable design including listening to your users, understanding your medium, and being able to bridge the two with a well-designed user interface. This is not a typical design class; you will exercise your analytical and communication skills more than your aesthetic skills. The course will explore methods from cognitive psychology for researching user needs. Students will learn to objectively evaluate the usability of products that we encounter everyday. Students will also learn to design from user requirements, and how to test our designs to verify their successes or uncover design flaws.”

The next few years are going to be very, very busy for me… but it will all be worth it!

So it turns out that I can’t redirect my old jinabolton.com feed to my new one, since I use Feedburner for both. Feedburner can’t redirect to Feedburner. So unfortunately, jinabolton.com’s feed has been deleted. If you were subscribed to that feed, you probably won’t see this message anyway… bummer. But if you somehow do find this post, please resubscribe to the new feed URL.

Just a quick note that I have redirected the feed from JinaBolton.com to my new site, Sushi & Robots. If you link to JB.com in a blogroll or a links page, please change your links to my new personal site. Thanks!

I was checking out the new Zazzle redesign, and in the process, I created this shirt. There’s a guy and a girl’s shirt. Buy one? You know you want to! Proceeds go to fund new toys, food, and things for Zalitron her self!

Just watch it, okay? It’s awesome. The Robots are Coming (My 1^st Big Break), by Cut Chemist, with Fisheye awesomeness. Yep. Awesome.

Whoa, now these are fun. These GUIMagnets are GUI elements that you can use while prototyping on the whiteboard. Very cute.

Wow. This SlimKey stand is not only hot, but looks perfect for what I need. I like to use my desk for things other than just my keyboard — sometimes I need to write or draw… you know… that thing you can do with your hands other than typing? I always have to move my keyboard off to the side or in my lap to do so, but with this thing, I could just tuck it snugly under my monitor. DO WANT.

[Via Unplggd]

Awesome moments in Olympic history are captured in this YouTube video. This is the kind of thing that I like about YouTube… finding awesome historic video like this.

[Via Kottke]

“Life is like a bicycle, to keep your balance your must keep on moving.”

—Source

Crib Candy, “bookmarkable stuff for your home” is a site I found out about through Unplggd. It’s filled with all sorts of neat, modern design (something I am a huge fan of), and is pretty sweet. Check it out.

For my birthday weekend, I took my first-ever trip to Los Angeles, which was also my first-ever trip via Virgin America. I was impressed by their branding. Their boarding passes looked great. Their plane’s interior looked great. Even the desk stand at the gate look great. But what really stood out for me was their safety video. It was light-hearted, but ma