M@

Human Computer Interaction Design @atomaton | Twitter *Disclaimer: This is my personal blog. Thoughts and opinions expressed here are mine and do not necessarily represent the views of my employer, its clients or affiliates.

[atomaton]

Lots of things change, except for the trash icon

[atomaton]

When designing for human computer interaction, communication is the overriding concern and creative expression is simply one means to this end.

Mullet/Sano Designing Visual Interfaces

[atomaton]

A demonstration of using AR mobile technology to interact with art work.

The Idea: A mobile app that would allow students to explore art and encounter scholarship related to specific parts of the image in a fun, effortless way. 

 Goals: 

1. Making art history scholarship engaging and accessible 

2. Experiment in designing for both digital and physical space   

3. Learn about AR; specifically, experimenting with Unity/Vuforia 

4. Collaborating across teams, locations, and skillsets  

Scenario: 

Someone using this app in a museum, can point their device at different paintings to get a better understanding of the content, medium, and meanings.  Each area that has information is linked to a scholarly article on JSTOR.

[atomaton]

Designing physical and digital spaces.

Human Computer Art Interaction

The image captures life size reproductions of parts of paintings to understand how a real painting would look through the view port of a mobile device.  Wanted to understand how close to the painting someone needed to be, since in museums some paintings have limitations.

[atomaton]

#biomed

[atomaton]

#contactprint #film

[atomaton]

2017-11-28_03-14-35 by Matthew Martin

[atomaton]

Ivan's Paper Computer

Ivan's paper computer in action.

[atomaton]

“You never change things by fighting the existing reality. To change something, build a new model that makes the existing model obsolete.”

Buckminster Fuller 

[thehipperelement]

Great designers don’t fall in love with their solution. Great designers fall in love with the problem.

Jared Spool (via thehipperelement)

[iauxjobs]

via Twitter https://twitter.com/IA_UXJOBS

[atomaton]

Product design is the new term for graphic, visual, interaction, and experience design

[atomaton]

Content Strategy and IA

Catalog Taxonomy:  The taxonomic structure that defines the hierarchical and related relationships between a company’s products.  Further metadata schema outside of the taxonomy can include product attributes and values that further define products and enables faceted navigation for easier searchability.

Content Inventory:  Performed after stakeholder interviews, the inventory is a documented list of every page and piece of content integrated into the existing site · The inventory reveals: The current state of the content, i.e., the breadth, depth and overall treatment of content and the branded conversation and over-arching narrative as it measures back to business objectives, customer needs and online best practices.

Content Matrix: Begun once sitemap and wireframes have been approved, the Content Matrix is a detailed list of each page that will be positioned on the new site with a set of data attributed to each page for build and content management purposes. It can also be used to track content development and is used after the site launch as a publishing calendar.

·      A numerical identifier

·      Page objective·

·      An assigned wireframe template, when applicable·

·      Content type

·      Frequency of content update (weekly, quarterly, annually)·

·      Content source (whether it’s a team, print source, or individual)·

·      Status (existing or newly developed)

·      Content development tracks with due dates

·      Content authoring

[atomaton]

The Fold

The concept of the fold goes back several mass mediums to the days of the newspaper.

With the advent of the scrolling mouse the fold has become less impactful on desktop/traditional websites, and less so with touch interfaces that allow the user to swipe with their thumb.  Additionally the many device heights and resolutions in mobile, the fold becomes even more arbitrary. There’s no one true fold in the mobile web.

I wrote this to a client in 2012

[atomaton]

Social Media Icon Placement

Types

Share: Share the current page on a specific social network

Profile: points directly to the social media profile

Like

Follow

Subscribe

Placement 1. Share buttons should be placed above and/or below blog posts or content to be shared 2. Profile buttons should be placed in the utility navigation (top of the page) and/or in the footer.

Icons should follow their respective guidelines

Twitter brand guidelines: https://cdn.cms-twdigitalassets.com/content/dam/brand-twitter/asset-download-zip-files/Twitter_Brand_Guidelines.pdf

Facebook brand guidelines: https://facebookbrand.com/wp-content/uploads/2016/08/facebook_brandassetsguide.pdf

Linkedin brand guidelines: https://brand.linkedin.com/

Google +: https://developers.google.com/+/web/share/

Comparative Assessment

Scholarly Kitchen Blog

Sharing icons are placed directly underneath the content that is to be shared.

Profile icons are placed in right rail. 

Gale Engage Learning Blog

Sharing icons are placed directly underneath the title and date of content that is to be shared.

Profile icons are placed in right rail and the footer

Nielsen Norman Group Articles

Sharing icons are placed directly underneath the content that is to be shared.

Profile or follow calls to action are placed in the footer

Resources:

https://codeinwp.com/blog/determining-best-placement-social-media-icons/

https://www.nngroup.com/articles/utility-navigation/

[atomaton]

The five core scholarly activities and their primitives

1. Searching

1.1 Direct searching

1.2 Chaining

1.3 Browsing

1.4 Probing

1.5 Assessing

2. Collecting

2.1 Gathering

2.2 Organizing

3. Reading

3.1 Scanning

3.2 Assessing

3.3 Rereading

4. Writing

4.1 Assembling

4.2 Co-authoring

4.3 Disseminating

5. Collaborating

5.1 Coorddinating

5.2 Networking

5.3 Consulting

6. Cross-cutting Primitives

6.1 Monitoring

6.2 Notetaking

6.3 Translating

6.4 Data Practices

www.oclc.org/programs/publications/reports/2009-02.pdf

January 2009 Palmer, et al., for OCLC Research

[atomaton]

SEO Checklist

This is a search engine optimization checklist culled from both Moz and the Nielsen Norman Group

KEYWORD/KEYPHRASE

Keyword is at the beginning of the <title> element 

Keyword appears in the URL

Keyword is in the headline

Keyword included in the Meta Description

Content includes keyword (2+) and related terms

Images include keyword in the ALT attribute

Anchor text includes keyword

PERFORMANCE

Page loads in 0.5 seconds or less

Content loads/renders in under 4 seconds

Page renders in all major browsers

Site is optimized for all devices (Responsive/Mobile Friendly)

BOT

URL uses hyphens to separate words

URL is static

Content is unique to URL

Content and links are in HTML

ROBOT.TXT does not block the crawler

Meta Robot Tag allows crawling and indexing

Title Tag is 75 characters or less

URL is 90 characters or less

Meta Description is 160 characters or less

All URLs are included in the XML sitemap that are to be crawled

Add NOFOLLOW to links that you do not want to promote (ex. user generated links in comments)

IA

Navigation is easily consumed/understood by both users and search bots

Layout of information is scannable and readable

All page are linked at least once on the site (no orphan pages)

HTML sitemaps are present and are up to date

Search result and page content are consistent 

CONTENT STRATEGY

Each page has unique content

Each URL is unique

Content is authentic, high quality and has value to the visitor

Content is updated regularly (Fresh)

Audit content to identify redundant, outdated, and trivial content (ROT)

Establish an editorial workflow and content governance

[atomaton]

Writing for the web

A short checklist I culled from  Karen McGrane and the Neilsen Norman Group

Users scan content and skim important parts, rather than read web text word for word.

1. Half the word count of conventional writing

2. Bulleted lists

3. One idea or topic per paragraph

4. Highlight keywords

Typographic changes (ex. Bold)

Hyperlinks

Color changes

5. Write headings as links

Assume the headings and subheads are repurposed for navigation.

Make the text actionable

Include trigger words

6. Be concise

get to the main point on one screen or in 100 words

7. Write the first sentence as a summary

Assume it will be a navigation summary

Repurpose for social media (ex. Open Graph Description tag)

Include keywords and main point in the first sentence

8. Objective language

Neutral language is easier to read and more credible.

No Jargon

9. Plain Language

Short simple words

Short sentences

10. Inverted Pyramid

Start with the conclusion

Follow with most important supporting information

End by providing background.