Trying the latest (now “mainstream-edge”) tech we want to focus potential users experience as much as possible to find the information they’re looking for. This is why the CSS3 SVG blur filter. Leave sharp the information they select, and blurry the rest of the page information. The svg filters are implemented only by Firefox 3.5+.

Enter the SVG

Dean’s Code HighlighterConsider this bit of SVG effect:

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" class="tohide">
    <defs>
        <filter id="blur">
            <feGaussianBlur stdDeviation="1" />
        </filter>
    </defs>
</svg>

Notice the 1st line, this is an external SVG file. The most important thing in the code above is the id property of the filter. That id will be used in the CSS below as a reference to the filter to apply.

CSS3 with SVG blur filter (the text in the example is actually canvas)

In CSS we’ll apply the filter by:

#wrapper:hover section.identity {filter:url(blur.svg#blur);}

Since I’ve made this post in a hurry, and don’t have time to strip the HTML and CSS to the essentials, consider having a look at the css3 with svg blur example live (Works only on Firefox; that is a working proof of concept for the upcoming blurry.js library).

Blurry.js is a canvas-based lib written in CoffeeScript to achieve this effects in all modern HTML5 browsers.

The problem remains for those who can’t! In the web we are constantly thinking about improving accessibility and experience for our web applications. How do we make this app accessible for the visually impaired?

That’s why on the web there is WAI-ARIA and Section 508, though very few implement them (this is why also we at pmworks Research are working on Kudite and AEI).

So here is my prototype business card. As we can see, I’ve adapted the Zoom-UI principles to present the data (sort of typographic hierarchy in print): the main and most important data are bold and big, clearly legible; as we zoom or look a bit more in depth, you can see my age, my experiences, a more detailed expertise (the order I acquired them Entrp->IxD->HCI), and a list of my companies or projects.

Zoom in #1

Step 1: Braille as an alternative

We now have a very informative business card, but what about accessibility to that information? This is why we need an alternative way at communicating our message.

I decided to use the Braille system as an aid to the visual presentation (just search, there should be at least one English to Braille converter). The red dots you see, is the embossed braille code.

The meaning of them is:

1. Pasion Mura
2. Telephone number with international prefix
3. white space to separate paragraphs (Contact details and Expertise)
   
4. Entrepreneur
5. IxD/UX Designer
6. HCI Research

Step 2: qrcode

On the back there is a qrcode encoding in VCARD all the data presented visually in the printed card. I plan to emboss in braille on the back, “Scan qrcode”, or emboss the qrcode bits (this is not recommended since the embossed black ink, can fade with time, corrupting the code).

I’m finishing the post by inviting designers and engineers to include usability in their think process, for whichever device or media they design for.

User Interface applications

3D Video Capturing, and almost holographic projection

And you project it as a holographic (from the 2002 movie Minority Report)

Voice Recognition

What should've been Microsoft focus for Kinect

Footnotes:

1. See Volumetric Display on Wikipedia for a fast introduction on the topic.
2. Iwamoto, T., M. Tatezono, T. Hoshi, and H. Shinoda. “Airborne ultrasound tactile display.” In ACM SIGGRAPH 2008 new tech demos, 1, 2008.

Firefox Bookmarks: Exploring 2 keyboard focused interactions

This is my proposal for Firefox “Add to bookmarks” action. You can find more on the Labs section:

I use bookmarks in a very heavy way, so being able to bookmark pages very easily and quickly is a requirement. This mockup of Firefox’ “Add to Bookmark” action is focused and privileges keyboard interaction.

The window GUI is from Aza Raskin’s Identity in the Browser mockup.

If you liked this you might want to checkout also my proposal to Aza’s tweet about “feeling” the load page loading faster.

There is an ongoing discussion about the current state of web design and the decline of its community, like the articles from SmashingMagazine^[1]. Here I’m going to (i) compare the web design community with other successful ones, (ii) try to define it, and (iii) try to find the problems, and propose solutions.

A community can be defined as a group of interacting people sharing and helping each other trough common interests and goals (may not be limited to this definition). Critical problems found, include: there is not a central community for any specific field of design, mentoring is not possible because of the lack of a centralized community (CC), resulting in a lack of focusing the driving force. All the successful community examples provided below share one important component, that is part of the definition itself: the goal. It seems that only the common interests are not a sufficient drive for a community, instead strict definitions of the goals or missions are necessary to reduce the dispersion and to allow growth.

Defining Successful Community

By successful communities we’re not referring to those who have a big established user base, but to stable ones. Examples of successful online communities are many programming (like open source projects), entrepreneurship, and free content (e.g. Wikipedia) communities.

A community is successful (SC) under these provisional laws:

1. The community serves a purpose

1. It’s easy for new comers to insert themselves in, directly in a specific domain, and they’re often mentored by more experienced members of the same domain

1. Member and interest differentiation does not make the overall SC unstable, by failing one of the laws
2. Community is domain, or goal driven {obsolete per law n.1}

Common Interests

Common interests in programming communities include technical-engineering problems and solutions, such as algorithms or best-practices, release of new or enhanced technology. Common interests in free content, such as educational or encyclopedic content, include per topic writing, and the learning process itself while editing or reading. Trough common interests of web design communities we find: graphic design topics (digital and print); typography topics; artistic illustrations; 3D compositing; user interface, information architecture, and user experience topics; strategic design (e.g. brand defining and strategic company identity); also an hybrid form of developer and design for weblog themes.

Differentiation in interests can be vital for the community itself because it makes it possible for members to explore new paths, and is also very effective in the selection and evolving of communities. The only problem here is for new members. (this and the central community will be treated in detail in the following article on the topic).

Confrontation

{This part studies differences between the web design communities versus the successful ones.}

In table 1 I have ported the names of the online communities (SC ones), in table 2 the web design communities (WDCs), and the goals or missions for each of them.

WDCs have way more different interests than (e.g.) programming communities, but still lack the driving force to be of any benefit to new members.

As we can see, one major problem with web design, it’s that there is not a central community where members can help each other, identify, and improve the field itself. Another one is in the misleading definition of Web Design itself. Web Design it’s just a collective common name resembling various specialized fields applied to the web, including: corporate identity, graphic/visual design, typography, interaction design, user interface design, and information architecture.

Problems identified, solutions, and conclusion

The lack of a centralized community makes it impossible for field experts to connect with each other via a central hub, where everyone can join, resulting in fragmentary blog posts spread across the Web. The new comers don’t know who the experts are, or at least can’t connect with them easily. This causes bad mentoring, or even none of it.

One solution could actually be the creation of centralized communities per specialized fields. But I’m reluctant of something like forums (e.g. traditional ones like phpbb).

Any feedback is appreciated. Is there any existing solution of other fields that can be ported to solve these problems?

Footnotes:

1. Kari Patila, The Sad State Of The Web Design Community, Smashing Magazine

What we did (the theory)

(Fig.1) Gravitational Corporate Spin, around the crunched space-time, time and space are literally separated.

By accelerating the giant bailed out corporates (in our universe you can find a lot of them) spin by just 1/4,
you can form an economic wrapped space-time crunch (like a black hole). But since the region could not absorb
enough mass from its region of space (eg. distribute matter in this space), the space is actually separated from
time in this region, and the result is a space-time warp you can use to travel in the future or back.

When you move your spaceship in proximity to the α spin in the space-time crunch (10¹³ – 1 m),
you’ll be automatically spun forward by 10^-3s (1 ms) in time, since you stuck in space for 1^-3s seconds.
To return back you have to use the β spin, that will put you in -10^-3s in time.

(Fig.2) Gravitational Corporate Spin, spin rotation.

How does the future look like

Well, its a lot different from ours. It appears to be just a bad dream. In this future there are wars (America and Al-Qaeda), innovation is strangled by a system called patents (this is the hot topic of the moment), difficult economy situations, repetitive history mistakes.

We tried to persuade the people of the future that the actions they were pursuing were bad, and showed them how our world it’s better because we throw those away, but they didn’t show any signs of understanding. So we gave up, and returned back to our beautiful present day, where things like that, just don’t happen anymore.

(Fig. 1) Project tag used for Kuse Vision at pmworks Research

Three days ago, I had some “free” time, in the sense that I couldn’t work on anything, and I decided to polish a bit more the GUI user experience. So I launched myself in the creation of a “logo”, let’s say a symbol of what the UX should reflect.

I didn’t need to make long revisions, I made only 2, just to redefine it. I worked on it only about 1 or 2 very spare hours: the palettes were already chosen; the primary typeface (a new one is required) was selected long before, in internal reports; the strategy was there; pmworks Research project’s Identity guidelines existed; remained only a distinctive provisional symbol to use within the organization (or who wanted to hear about).

(Fig. 2) Kuse Vision final logo. The 'vision' text is a clipping mask (transparent) over the rectangle.

My company makes a very heavy use of Myriad Pro (I really like it). I used the project tag (Fig. 1), included in concepts, mockups, prototypes, (internal) reports, basically everything, as the main guideline for the logo. I tried using Myriad Pro, but it didn’t represent the organic and fluid experience we needed. So I turned to Neo Sans, and here it’s the result: geometric but soft outlines shape the ideal for the high-tech GUI symbol.

In summary the logo creation didn’t require a lot of time, I didn’t even tried different proposals (no need to do so). It just come naturally. It was modeled together with the culture and the product itself (research, prototypes, mockups, etc). It was a (design) product of a visual evolution (more on this later).

Because Neo Sans isn’t free software, I will design a similar typeface only for this, or just edit some free ones.