Current location - Music Encyclopedia - Dating - WeChat reading interaction redesign
WeChat reading interaction redesign

Foreword: Just as the official announcement of WeChat reading - reading will no longer be lonely. WeChat Reading continues the social nature of WeChat, weakening the e-commerce nature of the bookstore and focusing more on serious reading, discovering good books, and reading exchanges. Among many reading apps, it is like a breath of fresh air without a strong commercial atmosphere. The interface is simple and refreshing, and the operation is simple. Of course, there are also problems such as too few books, which are not within the scope of this design. This article will redesign WeChat reading from some interactive details.

Software version: WeChat Reading 2.2.0

Device used: iphone7

Operating system: ios11.1.1

Experience time: 2017 -11-22

The following is the structural framework diagram of WeChat Reading:

1. The location of the operation buttons is confusing. The order of the operation bar at the bottom is not very reasonable. It is recommended to move delete to the far left, private reading in the middle, and move to the far right, which is more in line with intuitive operating habits.

Users can customize the grouping of books on the shelf. "Archive" is the default group, and books can be added to the group. As shown in the figure, when there are no books in the group, the upper right corner is "Modify Group", and the operations inside include "Modify Group Name" and "Delete Group". When there are books in the group, the upper right corner is "Edit". After clicking, it becomes "Modify Group" in the upper left corner and "Cancel" in the upper right corner. But as you can see from the bookshelf page (the first picture), after clicking Edit, the upper left corner changes to Cancel. That is, the location of the buttons is irregular and does not comply with the consistency principle in Nielsen's usefulness principle.

It is recommended to exchange the positions of "Modify Group" and "Cancel" of the group, so that it will be consistent with the previous operation position to avoid user confusion and misoperation.

In addition, if you want to group books, you can only use "Bookshelf-Edit-Move". It is recommended to add books directly to the group, click Add, open the ungrouped books in the bookshelf, and check Choose to join this group.

The modification is as shown below:

2. I found that the FM42|3 entrance in the upper right corner of the page is not very obvious, it looks like a label or logo, and most users do not Know the meaning of FM42|3 (including me). It is recommended to change it to an icon so that people can understand that it is clickable, and the content inside is some radio programs.

3. The reading interface has too many buttons and looks very cluttered. As shown in the picture, when the radio station is playing, you can see 3 buttons floating on the z-axis. At the same time, there are 4 buttons in the header and footer, and some buttons have more functions after being expanded. Faced with so many buttons, some of them are difficult to distinguish, making it more expensive for users to use. In this case, clearer logic is needed.

First, organize all the functions of the reading page as follows:

Improvement suggestions:

a. The two functions of "voice reading" and "listening to books" will Confusing. The author mistakenly thought it was the same function at first, but later found out that audio reading is just reading of articles, while listening to books is audio book review. It is easy to confuse these two buttons when released on the same page, and their properties are different when combined. In this regard, the author believes that the listening function and the text book review can be merged. They are both book reviews, but the form is different (one text, one voice). This prevents "voice reading" and "listening to books" from being presented at the same level to avoid misunderstandings.

Text book reviews are realized through the "Related Ideas" function. The "Related Ideas" entry is deeper and is included in the "More" in the upper right corner of the reading interface. "Related ideas" include wonderful ideas and friends' ideas, among which the wonderful ideas are presented in chapter order, as shown in the figure.

Combining the "Related Ideas" function with the "Listening to Books" function, the author redesigned the page as shown in the figure below. The new function is named "Book Reviews". Click to enter and there are three major modules: "Listening to Books", "Wonderful Thoughts" and "Reviewing Books". The book listening page is similar to the original page; wonderful thoughts include friends' thoughts and netizens' thoughts.

Compared with the existing content that is presented in a waterfall flow, the author has classified the content: one friend's idea appears at the top of the page, and the rest can be viewed by clicking on the expand arrow; netizens' ideas are divided according to article chapters, and each chapter Present 5 to 10 ideas, you can also view more. "Review Books" is a review of the entire book and allows you to rate the book. The button is in the upper right corner of the page. When there is no review, the button is yellow, click to enter the review; if it has been reviewed, the button will turn gray and can be clicked, and the "my" review will be displayed after clicking.

b. The "People who read this book together today" function is actually similar to bilibili's current number of simultaneous viewers. However, bilibili only provides the number of people and does not go into detail about personal information, while reading on WeChat has a stronger social meaning. The page includes the "book friend's" personal information, reading time, notes, reading progress and thoughts about the book. It is assumed that WeChat reading hopes to promote making friends through mutual reading, and then promote reading through social interaction.

It can be seen that this function has some overlap with the "Related Ideas" function. WeChat Reading's approach is to collect "Related Ideas" in "More". After the transformation in a, the function points of "related ideas" or "book reviews" have been increased and are no longer suitable to be put away. At this time, it will appear as an independent button on the first-level page together with "People who read this book today"***. Therefore, the problem of duplicate functions must be solved in other ways.

The overlap between the two is mainly in "ideas". "People who read this book together today" have ideas about this book, and "related ideas" are the gathering place of ideas. This repetition appears Bloated and redundant.

However, further analysis shows that the "People who read this book together today" and "Book Reviews" have different focuses. "People who read this book together today" focuses on people, while "Book Reviews" focuses on comments. So by weakening the idea part of "People reading this book today". The specific implementation method is to hide "Thoughts about this book" on the "People who read this book today" page, and then users can click on the business card to enter the personal homepage to view other people's related thoughts.

c. The current footer has 4 buttons, namely drawer navigation entry, progress bar, brightness mode, and font. Brightness mode and fonts are adjustments to the reading experience that can be integrated together. This frees up space for a "book review" feature. Progress bars are used relatively frequently and can be displayed directly. The final footer improvement is as follows: the lower left corner is a drawer navigation entrance for functions such as catalogs, bookmarks, underlining, etc., and adjustments to brightness, color, font, and font size are unified in a button. The "book review" function is placed in the lower right corner, and the progress bar is directly Displayed above the three buttons.

Based on the above modifications, the final structural framework of the reading interface is as shown in the figure:

(Except for the "Related Ideas" function in More, other functions are still retained , this is an insurance measure to prevent functions such as "Review Books" and "Book Details" from being too deep and reducing usability)

4. WeChat Reading supports pure underlined excerpts, or underlined excerpts. Line excerpts and write down ideas. The dashes can be found in the navigation drawer, as shown in the picture (left), but the corresponding dash ideas are not listed. Zhangyue does this better. It lists all the underlines and thoughts, so that users can easily see all their thoughts about the book, and the user experience is better, as shown in the picture (right).

5. WeChat reading can enrich some gesture operations. The picture shows the various gesture operations of Duokan Reading. Pull down: add a bookmark; pull up: close the book; slide left/right with two fingers: open/close the drawer navigation.

6. When reading aloud, you cannot click on any sentence to start playing. You can only drag the progress bar, and the progress bar is not accurate enough. You can refer to the method of clicking the corresponding lyrics in the music player to start playing directly from the lyrics, and long-pressing a certain text to start reading directly from the text.

7. The thoughts written in Palm Reading can be "visible to everyone" or "visible only to you".

However, when reading personal thoughts on WeChat, you cannot choose "visible only to yourself" (thoughts read privately are private, but thoughts read publicly cannot be set in privacy settings), which needs improvement.

8. The author found that when reading, selecting a text with less than 14 words will pop up the function bar as shown on the left, including copying, underlining, writing ideas, looking up the dictionary, sharing and error correction. When a text of 14 or more words is selected, the function bar shown on the right will appear, including copying, underlining, writing ideas, recording, sharing and error correction. In other words, when there are few words, it is looked up in the dictionary, and when there are many words, it is recording. This design should take into account that when looking up a dictionary, you usually look up words, so the number of words is smaller. Recording usually requires recording longer sentences. However, such intelligent switching is prone to problems in actual operation. For example, if a paragraph only has 13 words, then it cannot be recorded? Therefore, the suggestion buttons are all displayed, that is, after selecting the text, a function bar pops up, including 7 buttons for copying, underlining, writing ideas, looking up the dictionary, recording, sharing and error correction.

9. Palm Reading has many custom settings, such as line spacing, page turning method, eye protection mode, etc., but these are relatively minor functions. WeChat Reading can meet the general direction of the product. gradually improved under the premise.

10. From a product perspective, WeChat Reading is positioned to socialize with readers, but it is currently far from enough. It's just about sharing ideas and friends' attention, and it doesn't involve the concept of a reading group. For example, you can set up an author column and establish an author-oriented interest community. Book fans can interact in the community, exchange reading experiences, and even gradually develop offline activities. Of course, this also depends on the product positioning of WeChat Reading, which is an immature idea of ??the author for the time being.

Criticisms, corrections, and additions are welcome!