-
Notifications
You must be signed in to change notification settings - Fork 49
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Group Unicode symbols into browsable categories #110
Comments
Propose grouping Unicode symbols into browsable categories (#110)Designers: Bethany Chum, Erica Ding Link on Github: #110 “The glyph chooser in the editor is just search. Add a browsing feature that organizes symbols into categories. There are a lot of ways we might organize; start with design work.” (Github description) ProblemCurrently, there is a search bar that allows a user to search for symbols/glyphs. The symbols/glyphs are pulled from Unicode. What is Unicode? And how is it organized? Unicode is a standardized character encoding system that aims to represent every character from every writing system in the world. It provides a unique code point for each character, symbol, or ideograph, regardless of the platform, program, or language. This standard allows computers to handle and display text in various languages and scripts. Unicode includes a vast range of characters, including letters, numbers, symbols, emojis, and special characters. Each character is assigned a unique numerical value known as a "code point," which can be represented in various formats, such as hexadecimal or decimal. Unicode is crucial for ensuring multilingual support in software and communication technologies, making it possible to display text and symbols from different languages and writing systems consistently and accurately across different devices and platforms. For the unicode organization, please checkout the Unicode Data Format link. It shows how unicode is organized and what the meaning of the numerical value is. So what’s the problem? What are we trying to fix? The current observed behavior is that as a user searches, there is no organization or way to parse through the unicode efficiently. Although the search bar is meant to narrow down the search, the search results are cluttered with irrelevant and missing values with no understandable prioritization within the results. Additionally, as Wordplay aims to be a multilingual platform, the current search results only reflect the English language. For each of these problems, we will expand on the current state and our proposed solutions. Proposed Solutions1.1 Condense the unicode range – remove error unicodeCurrently, there are several blank spaces that appear in the search results. Developers should prioritize identifying the reasons behind these errors and resolving them. If necessary, these error unicode results should be removed. 1.2 Condense the unicode range – remove irrelevant unicodeSome less commonly used symbols also appear. At least in the English language, there are no commonly used terms for these symbols/glyphs. They can also be removed if not necessary because it causes clutter and requires users to spend more time searching for the symbol they want. 2.1 Prioritization – OperatorsOperators are important symbols that users use to learn programming, but we have found that when users use the search box, operators disappear until the user deletes everything in the search box. This can make users spend more time rediscovering these operators. To make the operators easy to access, we decided to stick the operators always on the top of the search box, to stand out from the searching result. 2.2 Prioritization – Dropdown CategoriesOnce we have condensed the unicode to valid and relevant results, we think it is best to organize the symbols/glyphs into a few categories: Emojis, Arrows, Shapes, and Other. We think these categories best reflect why a user might want to choose a symbol/glyph in Wordplay. Because Wordplay is designed to be a playful, global, and accessible programming language, we think these categories eliminate the excess symbols/glyphs that will likely not be used given the other alternatives. We propose using a dropdown menu to present the categories and limit the search feature within those categories so the search process is organized. Once a category has been chosen, an expanded section will open under the Operators bar. There will be three components in this expanded section: a search bar, recently used (symbols/glyphs), and all the symbols/glyphs that are in this category. The ‘recently used’ section contains the most recently used glyphs and will be shown at the top of the expanded section. The remainder of the section will be populated with all the symbols/glyphs in the given category until there is a search. As the user begins to search, the search engine will only search through the symbols/glyphs in that category. The recently used section will scroll with the rest of the results (will not be frozen at the top of the expanded section) since they are likely not what the user is looking for given they are scrolling away from it. 2.3 Prioritization – Using Tooltip TextCurrently, when the user moves the cursor over the corresponding Unicode character, a small tooltip appears, reminding the user to 'insert [Unicode],' which is not very helpful for users. Users still don't know which Unicode they have selected. We suggest changing the tooltip below to display the name of the Unicode character and provide a clearer description. This way, users can have a clearer understanding of the Unicode they are using and can search for the Unicode they want effectively. With descriptive tooltip text, we can use the descriptions to help organize/prioritize the search results. By using the description, it will likely be closer to what users will search for and make more sense than the current search. There is currently no observable prioritization of the results, so using the descriptions to match the input search can provide some type of order. 3. Multi-language friendlyFrom the current design, it appears that the Wordplay search box does not have multilingual search functionality. For example, when the language selected is English, when entering 'Comida' in Spanish (meaning ‘Food’), there is no search result. To make it more user friendly and accessible, we propose the future search feature can allow users to search in their own language in no matter which language version they were logged in to. But even within the selected language, the appropriate search results are not shown. In the same example, with the Spanish language selected, searching ‘Comida’ does not produce any results, meaning the behavior of the search is limited to English searches. The search should be translated, especially if a language other than English is selected. (Same goes with a Chinese search; searching ‘猫’ which is the Chinese character for ‘cat’ does not produce any results. We propose that the suggested behavior is that regardless of whether you are logged in with English or Mandarin as your language, it should produce the same search results as when ‘cat’ is searched in English.) External link: |
@amyjko Me and @bethanyc32 finished the design specification. |
Wonderful design draft! I really like many of its elements. I have several questions that you should resolve before this is ready to build:
|
Thanks Amy. We will figure this out and edit our draft as soon as possible.
Best,
Erica Ding
On Nov 2, 2023, at 5:54 PM, Amy J. Ko ***@***.***> wrote:
Wonderful design draft! I really like many of its elements. I have several questions that you should resolve before this is ready to build:
* 1.1 and 1.2 propose to remove some parts of Unicode. Can you precisely state which Unicode ranges you're proposing to remove and why? Many of the glyphs that aren't rendering just lack a font that's installed to display them, so that doesn't seem like a good justification for removal. And many of the unconventional shapes may be useful content for someone, so why remove them instead of organize them? (e.g., using the organizational scheme that Unicode already has?) Section 2.2 could just inherent the Unicode organization scheme, for example.
* For 2.2, please define "recently used" and a rationale for the duration you choose. Also, are these recently used glyphs saved in memory, in a browser, or per user account?
* Section 3 is English only because Unicode only offers English translations of glyph descriptions. What is your proposal for how to obtain translations of all Unicode glyphs? To my knowledge, Unicode only maintains English descriptions. Is your proposal that we translate all 149,813 glyphs?
—
Reply to this email directly, view it on GitHub<#110 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AZYGRO4QOYHW6ADZRS63WF3YCQ6FJAVCNFSM6AAAAAA2U6YYDWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTOOJRG42TQMRYGI>.
You are receiving this because you were assigned.Message ID: ***@***.***>
|
Propose grouping Unicode symbols into browsable categories (#110)Designers: Bethany Chum, Erica Ding Link on Github: #110 “The glyph chooser in the editor is just search. Add a browsing feature that organizes symbols into categories. There are a lot of ways we might organize; start with design work.” (Github description) ProblemCurrently, there is a search bar that allows a user to search for symbols/glyphs. The symbols/glyphs are pulled from Unicode. What is Unicode? And how is it organized? Unicode is a standardized character encoding system that aims to represent every character from every writing system in the world. It provides a unique code point for each character, symbol, or ideograph, regardless of the platform, program, or language. This standard allows computers to handle and display text in various languages and scripts. Unicode includes a vast range of characters, including letters, numbers, symbols, emojis, and special characters. Each character is assigned a unique numerical value known as a "code point," which can be represented in various formats, such as hexadecimal or decimal. Unicode is crucial for ensuring multilingual support in software and communication technologies, making it possible to display text and symbols from different languages and writing systems consistently and accurately across different devices and platforms. For the unicode organization, please checkout the Unicode Data Format link. It shows how unicode is organized and what the meaning of the numerical value is. So what’s the problem? What are we trying to fix? The current observed behavior is that as a user searches, there is no organization or way to parse through the unicode efficiently. Although the search bar is meant to narrow down the search, the search results are cluttered with irrelevant and missing values with no understandable prioritization within the results. Additionally, as Wordplay aims to be a multilingual platform, the current search results only reflect the English language. For each of these problems, we will expand on the current state and our proposed solutions. Proposed Solutions1.Multi-Language InaccessibleIn our current design, we incorporate all of the Unicode glyphs and symbols. However, not a single Unicode is accessible in other languages where all the descriptions are in English only. This means that the Wordplay search box does not have multilingual search functionality. For example, when the language selected is English, when entering 'Comida' in Spanish (meaning ‘Food’), there is no search result. But even within the selected language, the appropriate search results are not shown. In the same example, with the Spanish language selected, searching ‘Comida’ does not produce any results, meaning the behavior of the search is limited to English searches. The search should be translated, especially if a language other than English is selected. (Same goes with a Chinese search; searching ‘猫’ which is the Chinese character for ‘cat’ does not produce any results. We propose that the suggested behavior is that regardless of whether you are logged in with English or Mandarin as your language, it should produce the same search results as when ‘cat’ is searched in English.) To make Wordplay fully accessible in another language, we need to translate the Unicode descriptions, but there is currently no work done on this. We first propose to translate a small amount of Unicode at a time, starting with the Unicode we think would be most frequently used or most popular with our targeted audience (elementary - middle school students). [Refer to 2.1 for the categories we propose to translate first.] For the actual translation task, we suggest the locale team to tackle a category of Unicode at a time. Or, we could outsource this task to any contributors out there who would like to translate Unicode into their language. With translated Unicode descriptions, we propose the search feature can allow users to search in their own language in no matter which language version they were logged in to.
2. UI redesign2.1 Prioritize operatorsOperators are important symbols that users use to learn programming, but we have found that when users use the search box, operators disappear until the user deletes everything in the search box. This can make users spend more time rediscovering these operators. To make the operators easy to access, we decided to stick the operators always on the top of the search box, to stand out from the searching result. 2.2 Dropdown categories (translated and most frequently used)Once we have condensed the unicode to valid and relevant results, we think it is best to organize the symbols/glyphs into a few categories: Emojis, Arrows, Shapes, and Other. We think these categories best reflect why a user might want to choose a symbol/glyph in Wordplay. Because Wordplay is designed to be a playful, global, and accessible programming language, we think these categories eliminate the excess symbols/glyphs that will likely not be used given the other alternatives. We propose using a dropdown menu to present the categories and limit the search feature within those categories so the search process is organized. Once a category has been chosen, an expanded section will open under the Operators bar. There will be three components in this expanded section: a search bar, recently used (symbols/glyphs), and all the symbols/glyphs that are in this category. The 'recently used' section displays the glyphs most recently used by the user and is positioned at the top of the expanded section. To enhance user accessibility and continuity across various devices, the glyphs saved in each user account are stored in the cloud, ensuring seamless synchronization of recently used glyphs. The duration set for the 'recently used' section is three months, aligning with the educational context of Wordplay as a web app for class learning. This time frame corresponds to a quarter, providing an optimal period for students to complete substantial programming assignments or cover significant course content. Moreover, to prioritize a streamlined user experience, only eight glyphs can be stored in the 'recently used' column. This limitation ensures that users can easily access and manage a concise set of recently used symbols, promoting efficiency and decluttering the workspace. The remainder of the section will be populated with all the symbols/glyphs in the given category until there is a search. As the user begins to search, the search engine will only search through the symbols/glyphs in that category. The recently used section will scroll with the rest of the results (will not be frozen at the top of the expanded section) since they are likely not what the user is looking for, given they are scrolling away from it. Below are our categorization examples: Emojis
Arrows
Shapes
3. Future ConsiderationsTutorialsFor a Wordplay user and novice programmer, using the search bar might be initially perplexing, especially when confronted with unicodes and glyphs. Offering tutorials to guide them through our features would be beneficial, helping them navigate and avoid feeling overwhelmed. Translating everythingAs mentioned in our first proposed point about multi-language Unicode descriptions, Unicode is currently only accessible in English. Ideally, we would be able to translate 149813 glyphs into all the different languages that Wordplay supports and plans to support. The next steps would be to translate Unicode by categories and push the translations to Wordplay a category at a time (opposed to each translated description at a time so it is less messy for the user searching for glyphs). Expanding dropdown categories to incorporate more of the translated unicodeAs our proficiency in translating Unicode advances, we have the opportunity to include a broader range of language symbols, such as Han Zi (the Mandarin Chinese term for Han characters). According to the official Unicode explanation, the comprehensive coverage extends to languages written in various widely-used scripts. (the full explanation can be found in the insert link) When users switch to a specific language, we can enhance the dropdown menu by incorporating a dedicated section that shows the unique character categories relevant to that language. External link: |
@amyjko Hi Amy, me and @bethanyc32 just uploaded the final edited version of the design spec based on your feedback. |
Wonderful! I really like the thoughtful redesign considerations, and everything here seems buildable, with the exception of some of the future considerations. A few requests before we remove the
|
Hi @bethanyc32 and @YizhouDing, It's the end of the quarter, so please post an update on this issue. Things to consider:
If there's nothing to change above, then at least post a comment indicating that you've seen this. Thanks! |
There are no other work products hosted outside of Github aside from a Figma page embedded under the External Link section of our proposal and no branches associated with this issue. I will be stepping off of this issue, but feel free to contact me if there are any further questions or clarifications. Thanks! |
Wonderful, thank you @bethanyc32! |
@YizhouDing, can you move the final design spec into the issue body, not as a comment? The issue text should represent the final design proposal. Thanks! |
Sure, I just moved it to the issue body. Shall I deleted the comment ones? |
Leaving the comment history intact is fine. The goal is to have an easy to find reference for developers at the top. |
I can take this issue! Ready to start building 🔨 |
@ElliotRoe Great! It's yours. Be sure to read the dev wiki for process guidelines, and reach out with any questions. The primary place to look is |
It's the end of Winter! Please provide an update on this issue, including:
If you do plan to continue work on it, carry on. Otherwise, thank you for your contributions! |
Hi! I do plan on continuing to work on the ticket. A detailed checklist of tasks and completed tasks with linked commits can be found here. Thanks! |
Thanks for the update @ElliotRoe! |
@amyjko I would like to work on developing this. |
@ElliotRoe, are you still working on this in PR #353? It looks like the PR has stalled and others are wondering if they can continue your work. |
Once a quarter, I check each assignment to check the plans of the people that are assigned an issue. Please reply and indicate whether you intend to continue work on this issue. If you do not, please assign assign yourself, so we have an accurate account of who is working on an issue. |
@ElliotRoe declined to continue on this issue, unassigning. |
What's the problem?
From Amy's first comment:
The glyph chooser in the editor is just search. Add a browsing feature that organizes symbols into categories. There are a lot of ways we might organize; start with design work.
From Erica and Bethany's design spec:
What is Unicode? And how is it organized?
Unicode is a standardized character encoding system that aims to represent every character from every writing system in the world. It provides a unique code point for each character, symbol, or ideograph, regardless of the platform, program, or language. This standard allows computers to handle and display text in various languages and scripts.
Unicode includes a vast range of characters, including letters, numbers, symbols, emojis, and special characters. Each character is assigned a unique numerical value known as a "code point," which can be represented in various formats, such as hexadecimal or decimal.
Unicode is crucial for ensuring multilingual support in software and communication technologies, making it possible to display text and symbols from different languages and writing systems consistently and accurately across different devices and platforms.
For the unicode organization, please checkout the Unicode Data Format link. It shows how unicode is organized and what the meaning of the numerical value is.
So what’s the problem? What are we trying to fix?
The current observed behavior is that as a user searches, there is no organization or way to parse through the unicode efficiently. Although the search bar is meant to narrow down the search, the search results are cluttered with irrelevant and missing values with no understandable prioritization within the results. Additionally, as Wordplay aims to be a multilingual platform, the current search results only reflect the English language. For each of these problems, we will expand on the current state and our proposed solutions.
What's the design idea?
There are mainly 3 parts of the design idea, and the details are explained in the design spec:
Design specification
Propose grouping Unicode symbols into browsable categories (#110)
Designers: Bethany Chum, Erica Ding
Proposed Solutions
1.Multi-Language Inaccessible
In our current design, we incorporate all of the Unicode glyphs and symbols. However, not a single Unicode is accessible in other languages where all the descriptions are in English only. This means that the Wordplay search box does not have multilingual search functionality. For example, when the language selected is English, when entering 'Comida' in Spanish (meaning ‘Food’), there is no search result.
But even within the selected language, the appropriate search results are not shown. In the same example, with the Spanish language selected, searching ‘Comida’ does not produce any results, meaning the behavior of the search is limited to English searches. The search should be translated, especially if a language other than English is selected.
(Same goes with a Chinese search; searching ‘猫’ which is the Chinese character for ‘cat’ does not produce any results. We propose that the suggested behavior is that regardless of whether you are logged in with English or Mandarin as your language, it should produce the same search results as when ‘cat’ is searched in English.)
To make Wordplay fully accessible in another language, we need to translate the Unicode descriptions, but there is currently no work done on this. We first propose to translate a small amount of Unicode at a time, starting with the Unicode we think would be most frequently used or most popular with our targeted audience (elementary - middle school students). [Refer to 2.1 for the categories we propose to translate first.] For the actual translation task, we suggest the locale team to tackle a category of Unicode at a time. Or, we could outsource this task to any contributors out there who would like to translate Unicode into their language.
With translated Unicode descriptions, we propose the search feature can allow users to search in their own language in no matter which language version they were logged in to.
2. UI redesign
2.1 Prioritize operators
Operators are important symbols that users use to learn programming, but we have found that when users use the search box, operators disappear until the user deletes everything in the search box. This can make users spend more time rediscovering these operators.
To make the operators easy to access, we decided to stick the operators always on the top of the search box, to stand out from the searching result.
2.2 Dropdown categories (translated and most frequently used)
Once we have condensed the unicode to valid and relevant results, we think it is best to organize the symbols/glyphs into a few categories: Emojis, Arrows, Shapes, and Other. We think these categories best reflect why a user might want to choose a symbol/glyph in Wordplay. Because Wordplay is designed to be a playful, global, and accessible programming language, we think these categories eliminate the excess symbols/glyphs that will likely not be used given the other alternatives.
We propose using a dropdown menu to present the categories and limit the search feature within those categories so the search process is organized.
Once a category has been chosen, an expanded section will open under the Operators bar. There will be three components in this expanded section: a search bar, recently used (symbols/glyphs), and all the symbols/glyphs that are in this category. The 'recently used' section displays the glyphs most recently used by the user and is positioned at the top of the expanded section. To enhance user accessibility and continuity across various devices, the glyphs saved in each user account are stored in the cloud, ensuring seamless synchronization of recently used glyphs.
The duration set for the 'recently used' section is three months, aligning with the educational context of Wordplay as a web app for class learning. This time frame corresponds to a quarter, providing an optimal period for students to complete substantial programming assignments or cover significant course content. Moreover, to prioritize a streamlined user experience, only eight glyphs can be stored in the 'recently used' column. This limitation ensures that users can easily access and manage a concise set of recently used symbols, promoting efficiency and decluttering the workspace.
The remainder of the section will be populated with all the symbols/glyphs in the given category until there is a search. As the user begins to search, the search engine will only search through the symbols/glyphs in that category. The recently used section will scroll with the rest of the results (will not be frozen at the top of the expanded section) since they are likely not what the user is looking for, given they are scrolling away from it.
Below are our categorization examples:
Emojis
Arrows
Shapes
3. Future Considerations
Tutorials
For a Wordplay user and novice programmer, using the search bar might be initially perplexing, especially when confronted with unicodes and glyphs. Offering tutorials to guide them through our features would be beneficial, helping them navigate and avoid feeling overwhelmed.
Translating everything
As mentioned in our first proposed point about multi-language Unicode descriptions, Unicode is currently only accessible in English. Ideally, we would be able to translate 149813 glyphs into all the different languages that Wordplay supports and plans to support. The next steps would be to translate Unicode by categories and push the translations to Wordplay a category at a time (opposed to each translated description at a time so it is less messy for the user searching for glyphs).
Expanding dropdown categories to incorporate more of the translated unicode
As our proficiency in translating Unicode advances, we have the opportunity to include a broader range of language symbols, such as Han Zi (the Mandarin Chinese term for Han characters). According to the official Unicode explanation, the comprehensive coverage extends to languages written in various widely-used scripts. (the full explanation can be found in the insert link)
When users switch to a specific language, we can enhance the dropdown menu by incorporating a dedicated section that shows the unique character categories relevant to that language.
External link:
Figma: https://www.figma.com/file/aCN4TggJDma3zW8y1OMTbE/Unicode-Grouping?type=design&node-id=0%3A1&mode=design&t=mILYDFWALqqRHnjo-1
The text was updated successfully, but these errors were encountered: