Skip to content
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

Open
amyjko opened this issue Jul 24, 2023 · 22 comments · May be fixed by #353
Open

Group Unicode symbols into browsable categories #110

amyjko opened this issue Jul 24, 2023 · 22 comments · May be fixed by #353
Labels
buildable When an enhancement has a design ready to be built editor Anything related to editing code enhancement New or improved feature

Comments

@amyjko
Copy link
Collaborator

amyjko commented Jul 24, 2023

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:

  • Multi-language inaccessible
  • UI redesign (Developers can change this now)
  • Future considerations

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.

when selected language is English

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.)

Selected language Spanish

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.

  1. Immediate steps we propose is writing a disclaimer message below the search bar while a user uses the search feature stating that “Unicode search and descriptions are only available in English” (which would be translated to other languages depending on the selected language).
  2. Once we begin translating the Unicode, we understand that the process of translating Unicode is a large task, so we propose adding a disclaimer message to acknowledge that Wordplay is not yet fully accessible in other languages. For example, the message could look like, “Some Unicode not yet available in your language; we are currently translating the rest of the Unicode into your language”

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.

current display of operators current display of expanded glyphs without operators displayed

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.

proposed display of Operators with collapsed Symbols dropdown menu

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.

proposed expanded Symbols dropdown menu

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.

proposed expanded Emojis category

Below are our categorization examples:

Emojis

U+231A WATCH U+231B HOURGLASS
U+23E9 BLACK RIGHT-POINTING DOUBLE TRIANGLE U+23FF OBSERVER EYE SYMBOL
U+2614 UMBRELLA WITH RAIN DROPS U+2615 HOT BEVERAGE
U+2648 ARIES U+2653 PISCES
U+267F WHEELCHAIR SYMBOL
U+26F2 FOUNTAIN U+26F5 SAILBOAT
U+26F7 SKIER U+26FA TENT
U+26FD FUEL PUMP
U+270A RAISED FIST U+270D WRITING HAND
U+2728 SPARKLES
U+1F300 CYCLONE U+1F531 TRIDENT EMBLEM
U+1F549 OM SYMBOL U+1F57A MAN DANCING
U+1F58A LOWER LEFT BALLPOINT PEN U+1F58D LOWER LEFT CRAYON
U+1F5A5 DESKTOP COMPUTER U+1F5A8 PRINTER
U+1F5D1 WASTEBASKET U+1F5D3 SPIRAL CALENDAR PAD
U+1F5FA WORLD MAP U+1F64F PERSON WITH FOLDED HANDS
U+1F680 ROCKET U+1F6C5 LEFT LUGGAGE
U+1F6CB COUCH AND LAMP U+1F6FC ROLLER SKATE
U+1F90C PINCHED FINGERS
U+1F90F PINCHING HAND U+1F9FF NAZAR AMULET
U+1FA70 BALLET SHOES U+1FA74 THONG SANDAL
U+1FA78 DROP OF BLOOD U+1FA86 NESTING DOLLS
U+1FA90 RINGED PLANET U+1FAAC HAMSA
U+1FAB0 FLY U+1FABA NEST WITH EGGS
U+1FAC0 ANATOMICAL HEART U+1FAC5 PERSON WITH CROWN
U+1FAD0 BLUEBERRIES U+1FAF6 HEART HANDS

Arrows

U+21C4 RIGHTWARDS ARROW OVER LEFTWARDS ARROW U+21F3 UP DOWN WHITE ARROW
U+2301 ELECTRIC ARROW
U+2303 UP ARROWHEAD U+2304 DOWN ARROWHEAD

Shapes

U+25A0 BLACK SQUARE U+25D7 RIGHT HALF BLACK CIRCLE
U+25D9 INVERSE WHITE CIRCLE U+25F7 WHITE CIRCLE WITH UPPER RIGHT QUADRANT
U+2686 WHITE CIRCLE WITH DOT RIGHT U+2689 BLACK CIRCLE WITH TWO WHITE DOTS
U+26F6 SQUARE FOUR CORNERS
U+2729 STRESS OUTLINED WHITE STAR U+274B HEAVY EIGHT TEARDROP-SPOKED PROPELLER ASTERISK
U+1F532 BLACK SQUARE BUTTON U+1F53F UPPER RIGHT SHADOWED WHITE CIRCLE
U+1F7E0 LARGE ORANGE CIRCLE U+1F7EB LARGE BROWN SQUARE
U+1F90D WHITE HEART U+1F90E BROWN HEART
U+1FA75 LIGHT BLUE HEART U+1FA77 PINK HEART

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.

pop up tutorial

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

@amyjko amyjko added enhancement New or improved feature editor Anything related to editing code labels Jul 24, 2023
@amyjko amyjko self-assigned this Jul 24, 2023
@amyjko amyjko removed their assignment Aug 29, 2023
@amyjko amyjko added the needs design When an enhancement is not yet designed label Sep 21, 2023
@bethanyc32 bethanyc32 self-assigned this Oct 5, 2023
@wudel22 wudel22 moved this to Backlog in Management Oct 10, 2023
@wudel22 wudel22 removed this from Management Oct 10, 2023
@YizhouDing YizhouDing self-assigned this Oct 12, 2023
@YizhouDing
Copy link

YizhouDing commented Nov 1, 2023

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)

Problem

Currently, 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 Solutions

1.1 Condense the unicode range – remove error unicode

Currently, 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.

unicodes with blank space

1.2 Condense the unicode range – remove irrelevant unicode

Some 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.

less commonly used symbols

2.1 Prioritization – 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.

current display of operators current display of expanded glyphs without operators displayed

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.

proposed display of Operators with collapsed Symbols dropdown menu

2.2 Prioritization – Dropdown Categories

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.

proposed expanded Symbols dropdown menu

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.

proposed expanded Emojis category

2.3 Prioritization – Using Tooltip Text

Currently, 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.

current tooltip description of a cat emoji

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.

proposed tooltip description of a kissing cat emoji

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 friendly

​​From 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.

Selected language English Selected language Spanish

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:

Figma: https://www.figma.com/file/aCN4TggJDma3zW8y1OMTbE/Unicode-Grouping?type=design&node-id=0%3A1&mode=design&t=mILYDFWALqqRHnjo-1

@YizhouDing
Copy link

@amyjko Me and @bethanyc32 finished the design specification.

@amyjko
Copy link
Collaborator Author

amyjko commented Nov 3, 2023

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?

@YizhouDing
Copy link

YizhouDing commented Nov 3, 2023 via email

@YizhouDing
Copy link

YizhouDing commented Dec 4, 2023

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)

Problem

Currently, 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 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.

when selected language is English

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.)

Selected language Spanish

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.

  1. Immediate steps we propose is writing a disclaimer message below the search bar while a user uses the search feature stating that “Unicode search and descriptions are only available in English” (which would be translated to other languages depending on the selected language).
  2. Once we begin translating the Unicode, we understand that the process of translating Unicode is a large task, so we propose adding a disclaimer message to acknowledge that Wordplay is not yet fully accessible in other languages. For example, the message could look like, “Some Unicode not yet available in your language; we are currently translating the rest of the Unicode into your language”

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.

current display of operators current display of expanded glyphs without operators displayed

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.

proposed display of Operators with collapsed Symbols dropdown menu

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.

proposed expanded Symbols dropdown menu

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.

proposed expanded Emojis category

Below are our categorization examples:

Emojis

U+231A WATCH U+231B HOURGLASS
U+23E9 BLACK RIGHT-POINTING DOUBLE TRIANGLE U+23FF OBSERVER EYE SYMBOL
U+2614 UMBRELLA WITH RAIN DROPS U+2615 HOT BEVERAGE
U+2648 ARIES U+2653 PISCES
U+267F WHEELCHAIR SYMBOL
U+26F2 FOUNTAIN U+26F5 SAILBOAT
U+26F7 SKIER U+26FA TENT
U+26FD FUEL PUMP
U+270A RAISED FIST U+270D WRITING HAND
U+2728 SPARKLES
U+1F300 CYCLONE U+1F531 TRIDENT EMBLEM
U+1F549 OM SYMBOL U+1F57A MAN DANCING
U+1F58A LOWER LEFT BALLPOINT PEN U+1F58D LOWER LEFT CRAYON
U+1F5A5 DESKTOP COMPUTER U+1F5A8 PRINTER
U+1F5D1 WASTEBASKET U+1F5D3 SPIRAL CALENDAR PAD
U+1F5FA WORLD MAP U+1F64F PERSON WITH FOLDED HANDS
U+1F680 ROCKET U+1F6C5 LEFT LUGGAGE
U+1F6CB COUCH AND LAMP U+1F6FC ROLLER SKATE
U+1F90C PINCHED FINGERS
U+1F90F PINCHING HAND U+1F9FF NAZAR AMULET
U+1FA70 BALLET SHOES U+1FA74 THONG SANDAL
U+1FA78 DROP OF BLOOD U+1FA86 NESTING DOLLS
U+1FA90 RINGED PLANET U+1FAAC HAMSA
U+1FAB0 FLY U+1FABA NEST WITH EGGS
U+1FAC0 ANATOMICAL HEART U+1FAC5 PERSON WITH CROWN
U+1FAD0 BLUEBERRIES U+1FAF6 HEART HANDS

Arrows

U+21C4 RIGHTWARDS ARROW OVER LEFTWARDS ARROW U+21F3 UP DOWN WHITE ARROW
U+2301 ELECTRIC ARROW
U+2303 UP ARROWHEAD U+2304 DOWN ARROWHEAD

Shapes

U+25A0 BLACK SQUARE U+25D7 RIGHT HALF BLACK CIRCLE
U+25D9 INVERSE WHITE CIRCLE U+25F7 WHITE CIRCLE WITH UPPER RIGHT QUADRANT
U+2686 WHITE CIRCLE WITH DOT RIGHT U+2689 BLACK CIRCLE WITH TWO WHITE DOTS
U+26F6 SQUARE FOUR CORNERS
U+2729 STRESS OUTLINED WHITE STAR U+274B HEAVY EIGHT TEARDROP-SPOKED PROPELLER ASTERISK
U+1F532 BLACK SQUARE BUTTON U+1F53F UPPER RIGHT SHADOWED WHITE CIRCLE
U+1F7E0 LARGE ORANGE CIRCLE U+1F7EB LARGE BROWN SQUARE
U+1F90D WHITE HEART U+1F90E BROWN HEART
U+1FA75 LIGHT BLUE HEART U+1FA77 PINK HEART

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.

pop up tutorial

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

@YizhouDing
Copy link

@amyjko Hi Amy, me and @bethanyc32 just uploaded the final edited version of the design spec based on your feedback.

@amyjko
Copy link
Collaborator Author

amyjko commented Dec 5, 2023

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 needs design tag:

  • Can you create separate issues for the 1) tutorial, 2) unicode translations, and 3) additional categories? We want this issue to represent work that can be built, and all of three of these would need more design work before they could be built. Creating those issues will allow us to capture your preliminary design thoughts, and allow others to continue the work.

  • How should Unicode glyphs be categories into the four proposed categories? Unicode already has a categorization scheme. How do you your proposed categories map onto that? Or are you proposing a separate categorization, and if so, you need to specify which glyphs belong in which categories as part of the design (e.g, by specifying a set of unicode ranges for each category).

@amyjko
Copy link
Collaborator Author

amyjko commented Dec 14, 2023

Hi @bethanyc32 and @YizhouDing,

It's the end of the quarter, so please post an update on this issue. Things to consider:

  • Should you still be the assignee? (If you're planning on working on it, yes! Submit a comment explaining your plans. If not, then unassign yourself, so others are eligible to grab it).
  • Do you have any work products that are hosted outside of GitHub? Embed them in this issue, so others can build off of them.
  • Are there any branches associated with this issue? Please link to them in the issue.

If there's nothing to change above, then at least post a comment indicating that you've seen this. Thanks!

@bethanyc32
Copy link

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!

@bethanyc32 bethanyc32 removed their assignment Dec 18, 2023
@amyjko
Copy link
Collaborator Author

amyjko commented Dec 19, 2023

Wonderful, thank you @bethanyc32!

@amyjko amyjko added buildable When an enhancement has a design ready to be built and removed needs design When an enhancement is not yet designed labels Dec 19, 2023
@amyjko
Copy link
Collaborator Author

amyjko commented Dec 20, 2023

@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!

@YizhouDing
Copy link

@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?

@YizhouDing YizhouDing removed their assignment Dec 21, 2023
@amyjko
Copy link
Collaborator Author

amyjko commented Dec 21, 2023

Leaving the comment history intact is fine. The goal is to have an easy to find reference for developers at the top.

@ElliotRoe
Copy link

I can take this issue! Ready to start building 🔨

@amyjko
Copy link
Collaborator Author

amyjko commented Jan 17, 2024

@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 GlyphChooser.svelte, and there will likely be some functionality to build out in Unicode.ts. Feel free to submit a draft PR at any time for feedback, or comment here for design guidance.

@ElliotRoe ElliotRoe linked a pull request Jan 23, 2024 that will close this issue
17 tasks
@ElliotRoe ElliotRoe linked a pull request Feb 12, 2024 that will close this issue
17 tasks
@amyjko
Copy link
Collaborator Author

amyjko commented Mar 15, 2024

It's the end of Winter! Please provide an update on this issue, including:

  • Whether you plan to continue work on it
  • If you do not, 1) provide a detailed update of its status, 2) add any unfinished work, 3) list any any unmerged branches, and 4) unassign yourself, so someone else can take over the task. Please leave the issue in better shape than you found it, helping future contributors to start from where you left off.

If you do plan to continue work on it, carry on. Otherwise, thank you for your contributions!

@ElliotRoe
Copy link

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!

@amyjko
Copy link
Collaborator Author

amyjko commented Mar 18, 2024

Thanks for the update @ElliotRoe!

@aaryabhoite
Copy link

@amyjko I would like to work on developing this.

@amyjko
Copy link
Collaborator Author

amyjko commented Oct 4, 2024

@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.

@amyjko
Copy link
Collaborator Author

amyjko commented Dec 16, 2024

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.

@amyjko
Copy link
Collaborator Author

amyjko commented Dec 27, 2024

@ElliotRoe declined to continue on this issue, unassigning.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
buildable When an enhancement has a design ready to be built editor Anything related to editing code enhancement New or improved feature
Projects
Status: No status
Development

Successfully merging a pull request may close this issue.

5 participants