This week is the last week of class this semester. After dealing with other messy things, I put most of my energy back on this course. So I developed a lot of new progress in this week.

Prototype

This week I made improvements to the prototype. UIs that were previously considered too informative to understand in jogging from user testing were redesigned this week. In the previous design (images below), I presented the next 4 steps of breathing at a time, the purpose is to provide users with predictions. But in fact, this will increase the user's cognitive load zone, especially in sports, which has a negative effect, that is, the user cannot obtain effective information.

But users generally think that graphical visualization is a good idea. Therefore, in the context of synthesizing this conclusion, I decided to present only the information of the current step number on each screen, but also use the appearance rule of the graph to provide the user with the next prediction effect.

The new UI design is shown above. It uses a circle metaphor to connect with the mouth and breath. A filled disc indicates that the user should inhale, while a circle indicates that the user should exhale. The different sizes show whether this step is the first or second step. And I also used larger fonts to mark the sides to assist users in understanding the graphics in text. After I talked with the team members, they all thought it was a better solution. But then I will conduct user tests to verify its actual performance.

Portfolio

Making a portfolio is actually a challenge. I have to admit that its production cycle is too short, and I spent most of my energy on writing content. I actually allocate less time to design.

The origin of the design comes from a cool helmet photo I took against the door panel. I did not hesitate to use it as a banner, as I mentioned in the previous journal. I then decided to create my website in a cyberpunk style.

I refer to a cyberpunk-style color scheme in an attempt to present the title in a neon way, but in fact this does not seem to bring a good visual effect to the website. So I finally gave up the plan. I decided to use yellow and black color as the main color scheme for design.

But at least, I tried hard to improve the visual effect of the homepage. I added a fluorescent light effect to the title. I think this effect is quite cool. I hope some users will notice it.

In addition, I also wrote a simple function based on jQuery to automatically grab the chapter titles to generate an in-page navigation directory. So I don’t need to worry about the modification of the index when I am modifying the content. This function takes into account accessibility, the directory will be hidden entirely when JavaScript is not enabled, so it will not bother the user. Unfortunately, I ended up using the function on only two pages. So maybe it didn't really save my time.

const createIndex = () => {

  const titleList = $('.main-content h1');

  const pageNav = $('#page-nav');

  const navTitle = $('<h1>');

  navTitle.text('Page Index');

  pageNav.append(navTitle);

  titleList.each(function (index) {

    const title = $(this).text();

    const titleId = $(this).attr('id');

    const titleIndex = $('<p>');

    titleIndex.addClass('page-nav-item');

    titleIndex.attr({ 'data-link': `#${titleId}` });

    titleIndex.text(`${index + 1}. ${title}`);

    pageNav.append(titleIndex);

  });

  $('.page-nav-item').click(function () {

    const link = $(this).attr('data-link');

    window.scrollTo({

      top: $(link).position().top - 30,

      left: 0,

      behavior: 'smooth',

    });

  });

  $('.in-article-img').click(function () {

    $(this).toggleClass('big-img');

  });

};

Exhibition

Next week, we are about to usher in the exhibition. It feels a little unreal, and the semester is over in an instant. But looking at the prototype in my hand, I think I have done a lot of good work this semester. Looking forward to the exhibition next week.